To create two column layout with rounded corners.
This is the basic method, there are other advanced methods to make this layout
The Dimensions
1: 960
2: 200
3: 750
The Outline
All the divs are going to be inside div no.1
CSS property of div no.1
width: 960
To set the div to to be in the centre of screen make
margin left & right: auto
div no.2 or side bar is going to contain side-bar top corner, side-bar content and side-bar base corner
We going to use float property, to set div no.2 and div no.3 to stay beside each other in div no.1
CSS properties for div no.2
Float: left – makes the div float on the left
width: 200px
margin: 10px – gives space between div 2 and 3
Inside div2 there will be divA, divB, divC place these three div’s inside div2
divA will contain side bar top corner image of width 200px and hight 10px (the image should look like the image labled a)
divB will contain background colour of the sidebar
divC will contain side bar bottom corner image if width 200px and height 10px
CSS property for div no.3
float: left – this will float the div beside div no2
width: 400px
divD will contain content top corner image of width 750px and hight 10px (the image should look like the image labled a)
divE will contain background colour of the sidebar
divF will contain content bottom corner image if width 750px and height 10px
finally use <div style=”clear:both”></div> before the last div, so your template wont mess.
Comments