Easy layout with css - Before you create a website, you have to layout. This tip use css for layout. See the picture of the example website.


Click the image for larger image

Divide the picture following the green line in the picture and cut each part which be divided. Then let's code html. This this the example of html.



In the example source code (html file), there is including stylesheet from the external css file. You have css file such as "stylesheet.css" and in html file you include "stylesheet.css" into header tag. See the example.



This is the example css file (stylesheet.css)



From source code, there is dividing the layout to 3 columns. left, middle and right column. If you divide the area for each column with div, each div will be fallen in the other line, you can join each div with css

See the example, in column 1 which is the left column. There is the class in div which defines the styles for 2 classes. 2 classes are "column1" and "left". Class "left" is created to define css for floating the another div.



After you have finished layout column1 then continue the same way with column2 and column3. When you have finished all three columns then go on to the footer. But before doing with footer, the area of the footer will be floated on the right next to column3 due to the div of column3 is controlled with class left. So you have to clear the value of float for making the float div fallen in the below line by adding the div that call the class for clearing the float value. See the example.



And this is the stylesheet for class clear.



That's all and the div of footer will be fallen to the other line. After that you can layout for footer. Then you will finish the layout and can put the content in the layout for website.