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.
