Free CSS WebSite Templates & Web Design Templates Download
Content / Border -Trick
All templates are XHTML 1.0 and CSS2/ tableless.
This Template has been tested on the following Browser:
MAC Safari, Opera6.3 Opera8.5, Mozilla, Firefox, IE
PC: IE 6, Firefox
Linux: Konqueror, Firefox
3 columns / centered / fixed width
3 columns grid, both sides have a fixed width and are centered.
The concept with the border-trick is borrowed from an older layout by CssCreator - Generator.
#container {
width: 950px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;}
The container-div centers the layout and defines the overall width.
#outer {
border-left: solid 200px #EBD3E0; /* color of the left column */
border-right: solid 200px #EBD3E0; /* color of the right column */
background-color: #ffffff; } /* color of the content column */
The outer-div’s left and right border has the width of the left and right navigation.
#inner {margin:0 px; width:100%; } /* The ie/pc pecularity */
#content { position: relative; margin: 0px; }
The inner-div is needed because of a pecularity of explorer on pc. It is not required for all other browsers. The inner-div contains the left-, and content-div. The left-div’s left position is negative to the value of the border width of content-div. Hence, the left-div shifts succinctly over the content-divs wide border.
Get More Templates :
Border Trick TEMPLATES
2 columns fixed
centered
3 columns fixed
centered
Related Templates :
Print This Post
