in Code, Kompjuteri i IT, Razno

CSS Template – 3 columns fixed [en]

I have problems with my blog, coudn’t make same in FireFox and in Internet Explorer. I have 3 columns fixed centered blog. I find intensivstation, gread source for CSS. On this site i found trick to make blog same in ie and ff.

CSS box model and problems – before template

box
CSS uses a box model as conceptual framework for rendering a document. Each box can have the following properties:
margin (margin outside the box)
border (width of the border)
padding(padding inside the box)
top
right
bottom
left
width
height

Problem: A box with a width of 200px, a padding of 20px and border of 10px results in a width of 260px in Mozilla and 200px in Internet Explorer. Their is a wat to hack it, u can find it web site intensivstation.

CSS Template – 3 columns fixed – Continue on the next page

Menu left
[code]
#left {
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
}
[/code]

Menue right

Template is 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

[code]
#right {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
}
[/code]

Content / Border -Trick
[code]
#container {
width: 950px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;}
[/code]
The container-div centers the layout and defines the overall width.

[code]
#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 */
[/code]
The outer-div’s left and right border has the width of the left and right navigation.

[code]
#inner {margin:0 px; width:100%; } /* The ie/pc pecularity */
#content { position: relative; margin: 0px; }
[/code]
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.

Write a Comment

Comment