Content of div not restricted by div width

Question

Hi!

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.

Answer 1

Hide your overflow.

Or more precisely

.myclass { overflow: hidden; }

Answer 2

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.

Answer 3

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;