In this tutorial we will create a three-column layout that is responsive to the browser window. We will set a minimum layout width of 800px so that the scrollbars appear if it’s less than 800px. We can test this by simply resizing the browser window. I call this a classic layout because of the way is built.
We’ll start with an container and then inside of it we’ll add the header, content wrapper, content, two sidebars and a footer. In order to be able to build this layout you need an intermediate knowledge of HTML and, especially, CSS.
View the demo
For this tutorial we can use, of course, any text editor and my editor of choice is Dreamweaver. There are two ways you can work in Dreamweaver: using the design or the code view. I prefer using the code view but this tutorial can be easily accomplished using the graphic interface, too.
We begin with the CSS rules and will end adding the HTML divs. Each block of code will be explained first. So, let’s get started. Open Dreamweaver in the code view and in the head section add your styles. Start with <style type=”text/css”>
Here we start adding a universal css reset that is aimed at reducing different browser inconsistencies such as default line heights, margins and font sizes of headings, etc. For a more detailed explanation of this tool read Eric Meyer’s explanation.
- * {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
The largest container has an id of outerWrapper and it will contain all of the other divs in our layout. Setting the margin right and left will center the layout and the min-width property assigns a minimum width of 800px to it. Whenever the browser window is less, the scrollbars will appear. Also the div has an assigned color so we can visually see it.
- #outerWrapper {
width: 80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
min-width: 800px;
background-color:#C30;
}
Now, we are going to create a div with the id of contentWrapper. This div is inside the outerWrapper and will contain all the content of the website except the header and footer. The overflow:auto property will clear the floats that we have for our columns.
- #contentWrapper {
width: 100%;
overflow: auto;
background-color:#FF0;
}
Next is the header, which occupies the entire space across, regardless of how wide is the browser window. Again the color is assigned just for visual purposes.
- #header {
width: 100%;
background-color:#666;
}
After the header we move on to creating the sidebars. This is the main sidebar that will appear on the left. I am not a fan of naming sidebars left or right because over time the content of them might be switched and it’s semantically better to name them, let’s say, main and secondary. So here’s the sidebar with the id of sidebarMain that is floated to the left with a variable width of 30%.
- #sidebarMain {
float: left;
width: 30%;
background-color:#0C9;
}
Now we set up the secondary sidebar on the right.
- #sidebarSecondary {
float: right;
width: 20%;
background-color:#0C9;
}
Now we add the div with the id of content right in the middle.
- #content {
float: left;
width: 50%;
background-color:#09F;
}
The last div is the footer which is inside the outerWrapper but outside the contentWrapper.
- #footer {
width: 100%;
background-color:#630;
}
Now close your style and head tags.
- </style>
- </head>
We’re ready to insert the div tags and apply the id’s to them.
First, open the <body> tag
Now add all the divs and apply the id’s to them. You can simply use the code view or go to Insert and then click on Insert div tag. Also I will add some lorem ipsum text to preview the page in a nicer way.
- <div id=”outerWrapper”>
- <div id=”header”>Content for id “header”</div>
- <div id=”contentWrapper”>
- <div id=”sidebarMain”>Content for id “sidebarMain”.</div>
- <div id=”sidebarSecondary”>Content for id “sidebarSecondary”.</div>
- <div id=”content”>Content for id “content”.
</div>
- </div>
- <div id=”footer”>Content for id “footer”</div>
- </div>
Close your body tag as well as your html tag.
- </body></html>