Simple CSS! When a lot of text is in my div, it just continues in one straight line instead of going to next line? Width is set

Question

I have a set width and the height is set to auto. Each row is a div, inside is a div for each column. and there is a <p> tag inside the column divs where text should be. The CSS involved is very basic, just some padding and set width/heights... and float left.

Something I'm missing?

Answer 1

It's actually expected behavior for your code. You have a single "word" in your "cell", with no spaces in it. So browser doesn't know where to wrap and automatically extends the box. You should add word-wrap: break-word CSS rule to .orderHistoryTable selector (or to orderHistoryTable div.row1 if you want this behavior only on this cell)

http://jsfiddle.net/d2Amf/

Answer 2

Did you try setting the CSS overflow property?

http://www.quirksmode.org/css/overflow.html

Answer 3

I live and breath by the Clearfix method. It will solve many of your layout problems w/ divs. It might solve this issue you're having, or might not, but overall it's great to use when doing div heavy layouts. I use Jeff Starr's method from Perishable Press: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/