Craig Grannell
"The Essential Guide to CSS and HTML Web Design"
Finally, add the following two rules to float the columns, set their widths, and then
place a margin between them (by adding a margin-right setting to the left-hand
column).
#divOne, #divTwo {
float: left;
width: 340px;
}
#divOne {
margin-right: 20px;
}
No matter the size of the browser window, the two-column design sits centrally horizontally.
PAGE LAYOUTS WITH CSS
289
7
Note that the fixed-width values for the two columns can be replaced with percentages:
#divOne, #divTwo {
float: left;
width: 49%;
}
#divOne {
margin-right: 2%;
}
In such cases, the width of each div (and the margin) is a percentage of the parent element
??”the wrapper div??”rather than the browser window.
Required files Files from using-wrappers-to-contain-columns in the chapter 7
folder as a starting point.
What you??™ll learn How to clear floated content, thereby making a wrapper??™s
background display behind the content within it.
Completed files clearing-floated-content in the chapter 7 folder.
1. To highlight issues with content that doesn??™t clear floated content, you need to
make some quick changes to the HTML and CSS from the using-wrappers-tocontain-
columns folder. First, add a paragraph of text after the closing tag of the
wrapper div:
Subsequent content...