Flexible layout using css, percentage and background images
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 id="outer">
<div id="wrapper">
<div id="header">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="container"></div>
<div id="footer">
<div id="footer_left"></div>
<div id="footer_right"></div>
</div>
</div>
</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 - any questions or suggestions - contact us.
Written by Web Designer West Sussex - Sebastian Sulinski