CODEWITHSUNDEEP
htmlcss
Boardy
Boardy

Reputation: 36205

Setting the width of a relative div isn't working

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.

Div not setting width

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

Upvotes: 0

Views: 100

Answers (1)

Christopher Parsons
Christopher Parsons

Reputation: 382

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;

Upvotes: 2

Related Questions