Conflict between float, margin and width... how do you resolve this?

[Leav]

Hi Guys,


Basically what I'm trying to do is a kind of a 2 column design.

I have a menu floated to the left (clearing the header) with margins all around.
and I have the main content block.

I'd like the content block to have a margin from the header, menu and the right side.

I tried:

Code: Select all

margin: 5px;

without setting width, but that just results in the content clock clearing the menu (for some unknown [to me] reason).
tried:

Code: Select all

width: auto;

but no dice there either.

I can set the width to something... say:

Code: Select all

width: 80%;

and then the page displays but it disregards the margins on one side (depending on the float direction).

is there anyway to tell the content-div to change the width so it  is always 5px away from the menu, the header and the right edge?

Argh! headache!

Thanks alot!
-Leav

[Dr.CSS]

Kind of hard to help with so little info, a link is best or at least some html and css to put thru the test...

[Leav]

Sure!

here is the current layout:
http://project-hydra.nfshost.com/

the XHTML is here:
http://project-hydra.nfshost.com/index.xhtml

and the CSS is here:
http://project-hydra.nfshost.com/style.css

I'll quit my experimentation for a bit so you can get a static page.
(or i'll just experiment on a copy.)

Thanks for helping!
-Leav

[Dr.CSS]

Well I'm not sure what the problem is, other than the fact I can't see it in IE6, I was looking more for a CMSMS type install thing...

But this may help, if you look at default install templates you will see this kind of call...

.contentdiv
{
flat: right;  not needed
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
text-align: left;
widh: 80%;  not needed
height: auto;
min-height: 82%;
padding: 5px;
margin: 5px 0px 5px 20%;  adjust this to your needs
}