It is always a good idea to center your layout by using div containers, which I will be explaining in this tutorial. You can also use this tutorial to help you make a basic layout.
Many people use attributes like position: absolute, which is not the correct way to center a layout. Doing this means that the layout will be positioned from the top, bottom, left, or right (whichever one you choose) and it will only look like that in that specific resolution. Change your screen resolution and it won’t be centered.
Using div containers means that your layout will be centered in all resolutions – big, small, medium – whatever that may be.
The Container: CSS
Now, of course you may have a different set-up from this, but this is just an example of a typical layout with a sidebar on the left and content on the right, with a header image.
This is the CSS code for a standard container div:
#container {
margin: 0 auto 0 auto;
width: 900px;
background-color: #ddd;
padding: 10px;
}
Copy that into your CSS file. You can change the background colour.
The margin: 0 auto is the key. This is what gets the layout centered.
Obviously the width gives the width of the entire container. If you’re going to have a header image, be sure to keep it at this width if you want it to span across the top of the sidebar and content.
Sometimes you want the top and bottom edges of your layout to “stick” to the edges of the screen – in which case you would place this in your CSS:
body {
padding: 0;
margin: 0;
}
You can change the margins to “10px” or something similar, if you want the edges of the layout to be a certain distance from the edge of the screen. Additionally, you may need to add text-align: center; to the body section to ensure that the layout centers in Internet Explorer.
Header Div
The header div is basically what will contain the header image of your layout.
#header {
background: url('image URL');
width: 900px;
height: 200px;
margin-bottom: 10px;
}
In the above coding, simply replace image URL with the URL of your header image. You may also edit the other attributes and add padding if you need.
Sidebar Div
Let us assume you want your sidebar on the left side and have its width at 250.
Here is your CSS code. Note that we have set the width at our 250 and the height at auto. This means that regardless of how much content is in the sidebar div, the page will accommodate it without having an extra silly scrollbar; it will simply fit. The padding is essential so that your text won’t be too close to the edges.
#sidebar {
width: 250px;
height: auto;
float: left;
padding: 10px;
}
Notice the float: left; element. Floats are an important element of CSS based layouts. When you float something to the right or left, it will remain as far as possible to that side.
Thus, floating the div to the left means it will stay to the left.
As a side note: All floating elements must have a width declared.
Content Div
The content div is simple, once you know where the sidebar goes. Obviously the content div will verge to the right.
#content {
width: 610px;
padding: 10px;
float: right;
}
The width of the content div and the sidebar div, including padding on left and right (in this case add 20px for the content and 20px for the sidebar), should add to the width of your container (900px). If they don’t, you could end up with your content under your sidebar instead – meaning you have to reduce the width so it fits next to it.
In another case you could have a rather large blank space, so try to fill that up.
Footer Div
Now we must add a footer div. The reason we need this is because sometimes the container background appears a bit off in certain browsers. Adding the ‘clear’ attribute will allow a background to be shown behind floated divs, and allow the footer information itself to be displayed across the bottom of both your sidebar and content divs.
#footer {
clear: both;
padding: 10px;
}
Of course, you may add attributes to the CSS.
The Container: HTML
Now that you have included that in your CSS, it’s time to look at the HTML.
This is really fairly simple. This is what will go in your <body> section; naturally.
<div id="container"> (All the content and sidebar and content divs go here) </div>
Basically, the container div should surround everything on your page. Therefore the coding above would be surrounded by the body tags.
Putting it all together
Then you should put all the coding together in the following way:
<div id="container"> <div id="header"></div> <div id="sidebar"> (All your sidebar content and information goes here) </div> <div id="content"> (All your content on the page goes here) </div> <div id="footer"> (All your content in the footer goes here) </div> </div>
Where it goes
All the coding above should do between the <body> and </body> tags.
Here is an example with the XHTML 1.0 Transitional doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Site Title</title> <link rel="stylesheet" href="style.css" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> (All your container coding goes here) </body> </html>
It’s all pretty simple. You might also want to see validating to XHTML or PHP includes tutorials.
Subscribe to Heartdrops