Grr... I've been fighting with this CSS all weekend. I decided to take on the task of converting my company's internal site from tables to CSS so it'd be easier to manage. One upside of doing an internal site is that I don't have to worry to much about cross-browser compatibility (everyone has IE6).
Anyway - here's my situation: I have a header, a left navation, a gradient bar that separates the left nav from the content, content on the right, then a footer at the bottom. I've tried dividing up the divs in lots of ways, but I just can't get the floats to work. This is what my code currently looks like:
<div class="all">
<div class="header">
TOP NAV STUFF
</div>
<div class="leftnav">
LEFT NAV STUFF
</div>
<div>
<div class="content">
CONTENT
</div>
<div class="redgradient">
</div>
<div class="redline">
</div>
</div>
<div class="footer">
FOOTER STUFF
</div>
</div>

And the CSS file (with layout stuff bolded):
div { margin: 0px; padding: 0px; border: none; }
.all { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #FFFFFF; width: 570px; }
.header { height: 53px; clear: left;}
.leftnav { float: left; width: 14px;}
.footer { font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; text-align: center; height: 46px; color: #CC0000; background-color: #00FF00}
.content { background-color: #00FFFF}
.redgradient { float: none; width: 5px; margin-left: 16px; margin-right: 20px; background-image: url(.../template_images/left_red_line.gif); background-repeat: no-repeat; }
.redline { float: none; clear:left; width: 5px; margin-left: 16px; margin-right: 20px; background-color: #CC0033; background-repeat: repeat-y;}

OK, so here's what the whole redline thing's about. The red gradient image fades into a pure red line (background color). I made these two separate divs (although, thinking about it.. i don't have too..). The problems: 1. The red line thing is not happening at all. A hint of red turns up at the very bottom of the page. 2. I want the footer to be in the content's column (ie the left nav bar goes all the way to the end of the page without being cut off by the footer). But, if I add the footer div to the content's parent div or the content div itself, the floats get all screwed up - the left nav is above, not to the left of, the content.

Could someone please help me out? I've been struggling so hard with this! Sorry for writing such a long post, but I figured the more info the better. A million thanx to anyone who responds :D .

Should read whole post before replying !

Reply deleted as was no help !

Anthony

Hi -
Wish I could see the design...but here's some generic adivce:
- any float:left will try to go as far to the top and left as it can
- do you have a float:right for content to lie to the right of it?
- do you have a clear:both for any div below these two?
- you might want to add a <br style="(clear:both;)"> to
the page just before closing the outer / container <div>

hope this helps,
El

p.s. the smiley really should be the ; and ) in the style comment!

A div should not be named .div-class in css, but #div-class.

Correct:
#yes

Wrong:
.No