Layout with 3 colums (2 sidebars + content): how to?
Hello!
I'm currently trying to make my very first stylesheet (aspirin needed)
and I'm, of course, facing some problems.
I"ve found many sites offering layout tutorial for 3 colums websites,
very interesting ones. Problem is: the 3 colums are side by side
(normal) but I want 2 sidebars on the right + main content on the
left.
site should look like this (Header, Sidebar1, Sidebar2, Content,
Footer)
---------------
H
---------------
S1|
|
---- C
S2|
|
---- ---------
F
--------------
So far, code looks like this (notes: I haven't included footer yet and
I use temporary vivid colors for ease of building purpose only, I'll
switch to normal colors later)
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font-size:62.5% ;
font: "Trebuchet MS", helvetica, sans-serif ;
background: #000 url(xxxxx/back.jpg) repeat-x;
}
div#container
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #fff;
background: #00f ;
}
div#header
{
height: 100px;
background: url(file://xxxxx/header.jpg) no-repeat center ;
}
div#sidebar
{
background-color: rgba(204,204,204);
width: 130px;
height: 150px;
margin-top: 25px;
margin-left: 10px;
}
div#sidebar2
{
background-color: rgba(204,204,204);
width: 130px;
height: 150px;
margin-top: 25px;
margin-left: 10px;
}
div#content
{
background-color: rgba(204,204,204);
width: 610px;
margin-top: 25px;
margin-left: 150px;
border: 2px solid #000;
}
pre
{
overflow: auto ;
}
Main problem: content should start on the same line as sidebar1, but
here it is displayed after sidebar2 (margins are ok though).
How can I correct this problem?
Thanks for your
Larry
|