CODEWITHSUNDEEP
csshtmlwidth
Logan Young
Logan Young

Reputation: 431

Content of div not restricted by div width

I could swear I've seen articles about this problem, but I can't for the life of me find them again! Basically if I have

<div style="width: 250px;">The width of this div should be no less than 250px wide</div>

In the code below, the content in the div isn't restricting it's width to the width specified causing an overflow problem:

        <div class="PostIt">
            <div id="tags"><span class="qExtraLarge"><a href="Team/Default.aspx#lucky">Lucky Khumalo</a></span>
            <span class="qLarge"><a href="Investments/Social/School/Default.aspx">School</a></span>
            a;orghaepoht8aegae[hgi'aehg[ahgiha[e8gjaerghuoaeir'ghu;dsOsgh;vrwi/jbvh?URbnIRWhb'a[985h[qygherionhbdl</div>

        </div>

.PostIt { display: block; text-align: left; padding: 30px 30px 30px 30px; height: 240px !important; width: 190px !important; background: transparent url("Images/PostIt.png"); }
.PostIf #tags { width: 250px !important; }

Any suggestions would be great!

Thanks in advance.

Upvotes: 2

Views: 7373

Answers (3)

timrwood
timrwood

Reputation: 10671

If you want to hide any overflowing content, use overflow:hidden;

If you want to show the content and just force a line break, use word-wrap:break-word;

Upvotes: 4

Damian Edwards
Damian Edwards

Reputation: 7339

Setting a width on a block element alone won't stop any contents that are wider than that width from overflowing the bounds of the element. To do that you need to also set the "overflow" property. Setting it to "hidden" will simply hide anything outside the bounds, but you can also set it to other values to automatically show scrollbars, etc.

See http://reference.sitepoint.com/css/overflow for a good explanation of the overflow CSS property.

Upvotes: 1

Nick Larsen
Nick Larsen

Reputation: 18877

Hide your overflow.

Or more precisely

.myclass { overflow: hidden; }

Upvotes: -1

Related Questions