a simple CSS layout - margin errors

[kvirri]

Hi! I'm new to CSS. I want to quit using tables.
What I'm trying to do is obtain a simple layout: banner, menu, contents & navbar, footer.
Like this:

http://img401.imageshack.us/img401/9315/gigiip3.png (http://img401.imageshack.us/my.php?image=gigiip3.png)

There are 4 horizontal divs, each contains two subdivs, except the first one (header).

The first problem I ran into was the float horror.
I would either need a div in the second horizontal div, between its child divs, or everything else would f*ck up. At last, I have discoverd the #div:after.

Although it works, there is a problem. Margins (between the horizontal big divs) won't add at all into opera. They are ok though in firefox and IE.

You can see the current state at www.izua.ath.cx/divuri.html

[WebJoel]

You have done a fairly good job so far... this is probably more of a other-browser issue, than anything.

I am curious though why this exists, what does for you, if it even works at all:#contents
{
background-color: #00FF00;
color: #000000;
width: 80%;
float: right;
clear: right;
} You 'float:right;" and 'un-float' in the same Declaration... This is like saying "color:red; color:blue;" and getting "blue text"... as it should be but the redundancy is the "color:red;"...

At any rate I'd have to look at this in OPERA in the morning to see the problem, but maybe (and I'm just guessing here), instead of margin-ing the DIVs, let them be stacked as~per normal page flow and use "padding" inside of the DIVs.
I am also wondering if OPERA supports the :after rule...

[Centauri]

Forget about the :after psuedo class and just add overflow: hidden; to #menubox and #mainbox - this will force the element to surround floats in modern browsers.

[kvirri]

Opera seems to support the after rule, since, if I won't use it, the design becomes a complete mess. I am using clear there because I read about it beeing as a "end of float" mark. I supposed that's the intended way to be used.

Centauri, thanks a ton! That solves both problems, my "before-going-to-sleep-I-know-my-site-uses-a-pseudoclass" feeling, and the margins not showing on opera :)

[WebJoel]

I found this much... seems a little sketchy and I'm too tired to understand what it implies..

http://mobileopera.com/reference/css

...I am using clear there because I read about it beeing as a "end of float" mark. I supposed that's the intended way to be used... I think that you are 'creating' and 'clearing' in a single instance, which equates to having never 'floated' in the first place.

You could just create a CSS ruleset of 'clear:both;' or 'clear:left;' / 'clear:right;' (.both {clear:both;}, .left {clear:left;}, .right {clear:right;}) and when you have a float in the HTML that requires being 'cleared', in your HTML you add:
<div class="right"><!-- --></div> This example would 'clear-right' the previous floated element.

Also, note the use of "<!-- -->". This is required for validation, as an 'empty DIV' would throw a validational warning, and this prevents that from occuring.