Website Design Company Sussex Ecommerce Web Site Design Services UK

Back to the list of tutorials

This tutorial will explain how to create css layout based on percentage.
Demo is available here.

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. You can download the images used in this tutorial from here.

Place these 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

Website Design Company

Ecommerce web site design uk