Topic : Two Column CSS Layout
Basic HTML: Two column layout | Basic CSS: Two column layout | Two-Column Exercise: Art by Justine
Basic HTML: Two column layout
<html> <head> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="content"> </div> <div id="sidebar"> </div> <div id="footer"> </div> </div> </body> </html>
Note in the HTML that the only difference between the one-column and two-column HTML is the addition of the <div> for the right-hand “sidebar” column. (In yellow above)
Basic CSS: Two column layout
*{ margin: 0px; padding: 0px; } body { margin-left: 0px; margin-top: 0px; } img { border: none; } #wrapper { width: 990px; margin-right: auto; margin-left: auto; } #header { height: 150px; } #content { background-color: #FFF; width: 650px; float: left; } #sidebar { background-color: #CCC; width: 340px; float: right; } #footer { height: 50px; background-color: #f3f2f2; clear: both; }
Note in the CSS that the only difference between the one-column and two-column CSS is the addition of the CSS for the right-hand “sidebar” column, the floats to both the #content and #sidebar and the clear for the footer. (In yellow above)
Two-Column Exercise: Art by Justine
Assignment 5 is to build the 2-column layout below OR your own choice of layout. More details are on the Assignment 5 page.