UndeadDragon
Super Moderator
- Reaction score
- 447
How to setup a website layout
I will be splitting this tutorial up in to different sections about how to add different elements to a webpage. These sections are: Centered web page, Floats, Two Column Layout and Three Column Layout.
Centered web page
A lot of websites are based on a centered layout. This means that they have equal space on either side of a container which holds all other parts of the website.
This can be achieved very easily. The method is to set the left and right margins to auto. This will automatically center the webpage. You must also set the div’s width for this to work. Example code:
Code:
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
#container
{
margin: 0 auto; /*Shorthand way of writing margin: 0 auto 0 auto;*/
width: 900px;
}
</style>
</head>
<body>
<div id="container">
<p>This is some text in a centered div</p>
</div>
</body>
</html>Preview here.
Floats
Floats can be used for various reasons. You can use them to nest a picture in some text, you can align your divs with them and you can create columned layouts.
Page elements can float to the left or right. The CSS for a float is simply: float:left or float:right.
IMPORTANT: When using float for a page layout and the containing div does not have a fixed height, it will not stretch down as you fill the floated divs with content. After using float in this case you should always add the line: <div style="clear:both"></div> This will not add any content to the page, but the containing div will recognise the content inside the floated div.
In this first example I will show you how to float a div to the right of the container (centered container). Example:
Code:
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
#container
{
margin: 0 auto; /*Shorthand way of writing margin: 0 auto 0 auto;*/
width: 900px;
}
.container p
{
float: right;
}
</style>
</head>
<body>
<div class="container">
<p>This text is floated to the right</p>
</div>
</body>
</html>Preview here.
Simply by setting all p elements in #container it will make the text float to the right of the div. You can also add a margin-right to make it float away from the edge of the div.
You can achieve an image gallery effect by floating each picture container to the left, whilst setting the width to something that will allow multiple images on each line. For example, if you have a width of 900px you could have 3 images on each row if you set each ones width to 300px (excluding margins). When the webpage cannot fit any more onto the row it should start a new row for the next ones. Example:
Code:
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
#container
{
margin: 0 auto; /*Shorthand way of writing margin: 0 auto 0 auto;*/
width: 900px;
}
.gallery_container
{
float: left;
width: 250px;
margin: 10px; /*Spacing out the containers*/
padding: 10px; /*Adding spacing inside the container*/
border: 1px solid #666;
background: #ddd;
}
.gallery_container img
{
width: 230px;
height: 230px;
}
.gallery_container span
{
color: #000;
}
</style>
</head>
<body>
<div id="container">
<div class="gallery_container"><img src="image1.jpg" /><span>An Image 1</span></div>
<div class="gallery_container"><img src="image2.jpg" /><span>An Image 2</span></div>
<div class="gallery_container"><img src="image3.jpg" /><span>An Image 3</span></div>
<div class="gallery_container"><img src="image4.jpg" /><span>An Image 4</span></div>
<div style="clear:both"></div>
</div>
</body>
</html>Preview here.
Two Columned Web Page
Web pages with two columns are very popular. They usually consist of a main, larger, content area and a smaller sidebar, often used for navigation. You can make one by floating one div to the left and another to the right. Example:
Code:
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
#container
{
margin: 0 auto;
width: 900px;
}
#header
{
width: 900px;
height: 200px;
background: #ddd;
}
#left
{
float: left;
width: 580px;
padding: 10px;
}
#right
{
float: right;
width: 280px;
padding: 10px;
}
#footer
{
width: 880px;
padding: 10px;
background: #eee;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="left">
<span>This is in the left column</span>
</div>
<div id="right">
<span>This is in the right column</span>
</div>
<div style="clear: both"></div>
<div id="footer">
<span>This text is in the footer</span>
</div>
</div>
</body>
</html>Preview here.
I also added a header and footer in there to show that you can combine floated divs with normal divs.
Note: You can add the attribute: clear:both; to the footer, rather than having it as a seperate div if you want. That will only work if the footer is in the container. I just use <div style="clear:both"></div> because I have got used to using it.
Three Columned Web Page
Another common webpage layout is the three columned layout. This follows the same method as the two column layout, but the content div (center) is not floated.
Code:
<html>
<head>
<title>CSS Test</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
#container
{
margin: 0 auto; /*Shorthand way of writing margin: 0 auto 0 auto;*/
width: 900px;
}
#header
{
width: 900px;
height: 200px;
background: #ddd;
}
#left
{
float: left;
width: 180px;
padding: 10px;
margin: 0;
}
#right
{
float: right;
width: 180px;
padding: 10px;
margin: 0;
}
#content
{
width: 480px;
padding: 10px;
margin: 0;
}
#footer
{
width: 880px;
padding: 10px;
background: #eee;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="left">
<span>This is in the left column</span>
</div>
<div id="right">
<span>This is in the right column</span>
</div>
<div id="center">
<span>This is in the center column</span>
</div>
<div style="clear: both"></div>
<div id="footer">
<span>This text is in the footer</span>
</div>
</div>
</body>
</html>Preview here.
Note: In the body section, the content div should come last, otherwise it will make the side columns float strangely (one will be lower and one will be higher), but this is easily solved if you just float everything before putting in the unfloated divs (apart from if the unfloated divs are supposed to be above the floated divs
)Thanks for reading, any requests for more stuff?
