Flexible percentage layout using css and background image, css percentage layout

Search Engine Users are Search Savvy: Does your Website have the right keywords to attract the right people?…
read more

Why Credit Crunch Cutbacks Must NOT affect your staff training programme…
read more

Go back

Flexible layout using css, percentage and background images
This tutorial will explain how to create css layout based on percentage. You can download the images used in this tutorial by clicking on the download button on the right.
Demo

Download source files

Fist let’s create a structure of our layout.
Copy and paste the following in between the <body></body> tags:

</div>

<div id="container"></div>

<div id="footer">

</div>

Now we need to format the layout by using css and images.
Place images in the images folder and apply the following css to format the layout:

body {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
}
#outer {
width:80%;
margin:0px auto 0px auto;
padding:0px;
background-attachment: scroll;
background-image: url(images/background_r3_c5.gif);
background-repeat: repeat-y;
background-position: right 0px;
background-color: #B5DE54;
}
#wrapper {
width:100%;
margin:0px;
padding:0px;
background-attachment: scroll;
background-image: url(images/background_r3_c2.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
}
#header, #header_left, #header_right, #footer_left, #footer_right {
margin:0px;
padding:0px;
}
#header {
position:relative;
height:70px;
background-image: url(images/background_r2_c3.gif);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: left 0px;
}
#header_left {
position:absolute;
top:0px;
left:0px;
width:30px;
height:70px;
background-attachment: scroll;
background-image: url(images/background_r2_c2.gif);
background-repeat: no-repeat;
background-position: left 0px;
}
#header_right {
position:absolute;
top:0px;
right:0px;
width:30px;
height:70px;
background-attachment: scroll;
background-image: url(images/background_r2_c5.gif);
background-repeat: no-repeat;
background-position: right 0px;
}
#container {
margin:0px;
padding:10%;
width:80%;
height:auto;
}
#footer {
margin:0px;
padding:0px;
height:40px;
position:relative;
background-attachment: scroll;
background-image: url(images/background_r5_c3.gif);
background-repeat: repeat-x;
background-position: left bottom;
}
#footer_left {
position:absolute;
bottom:0px;
left:0px;
width:30px;
height:40px;
background-image: url(images/background_r5_c2.gif);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: left bottom;
}
#footer_right {
position:absolute;
bottom:0px;
right:0px;
width:30px;
height:40px;
background-attachment: scroll;
background-image: url(images/background_r5_c5.gif);
background-repeat: no-repeat;
background-position: right bottom;
}

Now your layout is ready
Written by Web Designer West Sussex – Sebastian Sulinski