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