Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Setting the width of a relative div isn't working

Setting the width of a relative div isn't working

Problem

I am working on a web project and I have a popup b ox that allows the user to type in some text and this text is then appened onto the end of a content editable and the text is within span class.

I want the Width to be 80% and the text to wrap but the width is being ignored and the text is all bunched up and over lapping each line.

Below is what it looks like.

And below is the css..

font-style: italic;
background-color: #ababab;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
height: auto;
width: 80%;
padding: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

Thanks for any help you can provide

Problem courtesy of: Boardy

Solution

If the text is in a span, it will default to being an inline element. Inline Elements do not respect height and width properties. Inline elements however will respect line-height, and this property will fix your overlapping issue.

line-height: 20px;

To get your element to respect width, you will need to change the display on the element to inline-block or block.

display: inline-block;
display: block;
Solution courtesy of: Christopher Parsons

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Setting the width of a relative div isn't working

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×