CSS help please!

Adam

Hey guys!

I'm trying to achieve what I believe is not TOO complex a layout, but when it comes to divs within divs I tend to get a bit lost! I could probably produce it with tables but I'm trying to stay away from tables these days! So here's an example of the layout, I can achieve the header and sidebar fine, just the main content thats causing me pain!

My CSS at the moment:

html, body, #contents {
	min-height: 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: Arial, sans-serif;
}

h4 {
 font-weight: bold;
 color: #CC0000;
 }



/* SECTION DIVS */

#contents {
position: absolute;
top: 0;
left: 0;
}
 
#leftcol{
 float:left;
 position:relative; 
 }
 
#maincol{
 position: relative;
 min-height: 100%;
 margin-left: 16em;
 margin-top: 2em;
 margin-bottom: 5em;
 height: auto;
 width: 50%;
 }

 #rightcol{ 
 float:right;
 position:relative;
 margin-right: 3em;
 margin-top: 4em;
 }

#footer {
	clear: both;
	bottom: 0;
	width: 70%;
	text-align: center;
}

#footer {
    \width: 100%;
    w\idth: 100%;
}

/* END SECTION DIVS */




/* LOGIN DIVS */

#login_container
{
 margin-left: 12px;
 font-family: arial;
 font-weight: bold;
 font-size: 12px;
 border: 1px solid #CDCDCD;
 width: 164px;
 height: 128px;
 background: #000;
 color: #FFF;
}
#login_container p
{
 margin: 2px 0 0 5px;
 font-weight: bold;
}

#login_bg
{
 background: #E9E9E9;
 color: #000;
 height: 111px;
}
#login_bg form
{
 display: inline;
 font-size: 10px;
 font-weight: bold;

}
#login_bg form input
{
 margin: 0;
 margin-left: 8px;
 border: 0;
 border-top: 2px solid #BFBFBF;
 display: inline;
}
#login_bg form p
{
 padding-top: 5px;
 margin: 0;
 margin-left: 8px;
}


.bigred {
font-size: 12px;
color: #C2121D;
text-decoration: none;
margin-left: 8px;
}

.highred
{
 vertical-align: super;
 font-size: 9px;
 color: #C2121D; 
 margin-left: 2px;
 text-decoration: none;
 border-bottom: 1px dotted #C2121D; 
}

.shorter_input
{
 width: 95;
 margin-right: 3px;
}

/* END LOGIN DIVS */




/* HEADER NAVBAR DIVS */


#dropmenudiv {
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a {
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color: #000000;
}

#dropmenudiv a:hover { 
background-color: #000000;
color: #ffffff;
filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
}

/* END HEADER NAVBAR DIVS */




/* GOOGLE AD DIVS */

#google_ad_container
{
 margin-left: 12px;
 font-family: arial;
 font-weight: bold;
 font-size: 12px;
 border: 1px solid #CDCDCD;
 width: 164px;
 height: 128px;
 background: #EBE8E9;
 color: #EBE8E9;
}

/* END GOOGLE AD DIVS */





/* HOMEPAGE DIVS */

#latest_news {

font-family: Ariel, sans-serif;
font-size: 0.8em;

}

#latest_news img {

float: left;
border: 1px solid  #000000;
max-width: 165px;
max-height: 200px;

}

#latest_news_text {

margin: 2em 2em 2em 2em;
}

EDIT: UPDATED TO FULL CSS
I'd really appreciate ay help on this, thanks!

louie

try giving the left and right column the width:15%;
content: 68%;
float left and content = left
float right = right.

Adam

Sorry, I don't think I explained myself very clearly. What I meant to say was that the header and sidebars are in place and do as their told, the main middle section is defined, all I need help with is the main content i.e. the black bars, text and images.

Goodshape

Have you got any HTML to go along with that?

Have you made any attempt at it yourself?

You haven't given us much to go by.

Gordon

Are you trying to copy the image into HTML or something?

What's the deal with the footer id by the way?

#footer {
    \width: 100%;
    w\idth: 100%;
}

Where previously you have the width set at 70%. Is this some kind of ie/firefox/opera hack?

From what I understand; divs within divs are quite like tables within tables (except for the IE double space bug). Unless you use absolute positioning probably.

Adam

Sorry, yeah, I've tried doing something like this (i've included all the markup for header and sidebar, but its all fine, if you scroll right down you'll see the main content section) :

Adam

Gordon wrote:

Are you trying to copy the image into HTML or something?

What's the deal with the footer id by the way?

#footer {
    \width: 100%;
    w\idth: 100%;
}

Where previously you have the width set at 70%. Is this some kind of ie/firefox/opera hack?

From what I understand; divs within divs are quite like tables within tables (except for the IE double space bug). Unless you use absolute positioning probably.

Yeah, basically I'm trying to achieve the layout in the image.

The width thing in the footer div is an IE hack apparently (though to be honest I don't understand hacks too well, I just found it as a solution to using css footers).