3 Col : Div under div

[tarleton]

Hi so I'm super new to CSS. Trying to make a 3 col layout (yes I know there are some on the net already but trying to learn). Got a few problems:

 

1. Right Column isn't staying near header.

2. Mid column isn't going to full length like left column.

3. There is a white border around entire page.

 

Thanks for any help guys.

 

Here is what i've got so far: www.spacioushost.com/test

 

style.css

#header {
background: #000;
height:55px;
width:100%;
}

#leftcol {
position: absolute;
width: 15%;
height: 100%;
background:url(images/left_col.jpg) repeat;

}


#rightcol {
width: 15%;
height: 100%;
background:url(images/right_col.jpg) repeat;
float: right;


}

#midcol {
background: #232323;
width: 70%;
height: 100%;
margin-left: 15%;
}

[rajivgonsalves]

try this out

 

#header {
   background: #000;
   height:55px;
   width:100%;
}

#content {width:100%;padding:0px}

#leftcol {
   width: 15%;
   height: 100%;
   background:url(images/left_col.jpg) repeat;
   float:left
}


#rightcol {
   width: 15%;
   height: 100%;
   background:url(images/right_col.jpg) repeat;
   float:left
}
   
#midcol {
   width: 70%;
   height: 100%;
   float:left
}

[tarleton]

So your amazing

[tarleton]

Another Quick Question:

 

1. When I add text how can I make it so it is contained within the div area?

 

[rajivgonsalves]

just put it in the respective div tag just like you've done with "<---- Left Col ------>" etc. etc.

[Dorky]

commenting code... nah!!! if it was hard to write, it should be hard to read

lmao, that is just awesome. 

[tarleton]

Hi mate so yeah I did. But it still keeps going outside....

[rajivgonsalves]

can you post your code it ? and tell what is going out

[Dorky]

body {
background-color: #FFF;
}

#header {
background: #000;
height:55px;
width:100%;
}

#leftcol {
display: inline; float: left;
width: 15%;
height: 100%;
background:url(images/left_col.jpg) repeat;

}


#rightcol { display: inline; float: left;
width: 15%;
height: 100%;
background:url(images/right_col.jpg) repeat;



}

#midcol {
        display: inline; float: left;
background: #232323;
width: 70%;
height: 100%;

}

just edited what you had in firebug. works great!

 

[attachment deleted by admin]

[Dorky]

oh and ie may have some auto margins and there is always the body margin. tou can just put

* { margin: 0px; }

just like that at the top of your css

[tarleton]

Ahhhh

Phpfreaks if only you were a female

 

Cheers