0

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?

jen
  • 3
  • 2
  • 1
    Could you please post at least the relevant parts of the css and perhaps the html too? – JakeParis Dec 29 '10 at 20:58
  • 1
    Why divs? This looks like tabular data to me. That's what tables are for. – ScottE Dec 29 '10 at 20:58
  • I was asked to do it with divs. I could post it but its not really different from what I just wrote up theree.. – jen Dec 29 '10 at 20:59
  • 1
    Check out this question: http://stackoverflow.com/questions/2257657/how-can-i-allow-text-to-wrap-inside-a-word-if-necessary/2257685#2257685 – wsanville Dec 29 '10 at 21:00
  • 'Something I'm missing?' *yes,* most of the question. What's your CSS what's your **actual** (x)html mark-up? – David Thomas Dec 29 '10 at 21:00
  • 2
    Whoever told you to do it with divs ought to be drawn and quartered. – BoltClock Dec 29 '10 at 21:03
  • The browser will have problems displaying text with no white space. Normally, you can get text to wrap if it has white space. Probably the best you can do is to get scroll bars to appear or appropriately size the container. – rcravens Dec 29 '10 at 21:07

3 Answers3

3

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/

German Rumm
  • 5,782
  • 1
  • 25
  • 30
  • word-wrap: break-word; is great but does not work in older versions of IE. If you want your site to be cross-browser compatible it's important to keep that in mind. – Amber June Jun 06 '11 at 21:51
0

Did you try setting the CSS overflow property?

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

zsalzbank
  • 9,685
  • 1
  • 26
  • 39
0

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/

Amber June
  • 376
  • 3
  • 10