In this easy CSS and XHTML tutorial I will teach you how to create a simple yet attractive website template which will be fluid in nature. Look at the image above. This is what we will be creating.

First off the CSS :

Reset the margin and the padding for all.

* {
margin:0;
padding:0;
}

If you notice the layout as shown above the background is a simple gradient ( from dark bluish grey to light grey ) which can be made in photoshop or any other image editing software. The gradient after a certain depth merges with the body colour. Therefore we define the background image as well as background colour too. We also want the gradient to repeat horzontally which can be set by the repeat x property.

body {
background: #bfbfc9 url(tree.jpg) repeat-x;
}

Next comes the big tree on the right side of the layout. We want it to remain at the bottom and on the right. For this we will use the absolute positioning method. We will also define the width and the height of the image.

#tree {
background: url(tree1.gif) no-repeat;
position:absolute;
bottom: 0;
right: 40px;
width: 188px;
height: 433px;
}

The first of the content DIV's is the intro div. We will introduce the web design studio company here in this div. The width of the div is important here, which we have set at 450px. The padding=left property is set to 96px so that the content can shift on the right thereby avoiding overlapping with the image. The intro p property is for formatting purpose.