CSS floating problems again

HTML & CSS
1

Hi everyone,
I would like to have my page devided into 3 columns, each column width equals 33% of the page width.
Main HTML code goes as follows:


<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="test.css" />
  </head>
  <body>
    <div id="column1">
      <p>1111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
   </div>
  <div id="column2">
    <p>2222222222222222222222222222222222222222222222222222222222222222222222222222222</p>
  </div>
  <div id="column3">
    <p>33333333333333333333333333333333333333333333333333333333333333333333333333333333</p>
  </div>
  </body>
</html>

Stile code is:


#column1 {float:left; width:33%; border: 1px solid blue}
#column2 {float:left; width:33%; border: 1px solid red; padding:12px 1px 1px 1px;}
#column3 {float:left; width:33%; border: 1px solid green}

Since each line is broader then 33% of the page’s width, I expected it to be continued at a 2nd line
in its’ paragraph and not to penetrate into its’ neighbor’s paragraph’s domain.
Attached is a screeshot of the page outcome of the above code.
Why does a line, when it reachs the 33% width of the page, doesn’t continue in a new line?
What is missing in the above code to make lines exceeding 335 of page’s width to continue in a
new line?
Thanks

2

Hi,

I don’t know many words as long as you have shown above!

Browsers won’t automatically break words at the boundaries of the parent unless you specifically tell them to.


#column1,
#column2,
#column3{word-wrap:break-word}

If you had used normal words with spaces you would have seen that the content would wrap as required. However it is always useful to add word-wrap:break-word to small percentage width columns to avoid long words sticking out.

Be careful with percentages and px border and padding as that simply won’t add up to the available space. For IE8+ you could use box-sizing so that the padding and borders don’t add to the width. Or you could use display table-cell instead of float (IE8+). Older browsers would need float and then use an inner element to hold the borders and padding.

3

Thank you so much Paul. I didn’t even recognize I was writing one word :rolleyes:
Deviding it into few words solved my problem:injured:
Thanks again…