Getting DIV's to sit next to each other in IE6 and IE7

[gazjones]

Hello all,

I'm new to the forum, and am hoping I can ask all of you if anyone can advise me on a (probably quite simple and amature) problem I'm having at the moment.

I've created a site, but am having problems getting DIVs to sit next to each other. I've tried "float: left", i've tried removing widths, padding, margins, and also adding them.

I am at a loss as to what to try next and wondered if anyone could advise me on the CSS I currently have?

Sidebar:

#sidebar {
display: block;
float: left;
width: 180px;
height: inherit;
word-spacing: 2px;
clear: none;
}

Content (that should run alongside)

#benefits_content {
float: left;
width: 669px;
}

I've also tried a container div:

#layout {
display: block;
margin: 0 auto;
width: 970px;

This was due to the IE6 issue of having float and margin together (causing double margin in IE6)

If anyone can offer me any advice or point me in the right direction I would be very grateful.

Thank you

Gary

P.S - IE6 = :smash:

[Agrunyan]

This should work, I haven't tested it:




#sidebar {
float: left;
width: 180px;
}

#benefitsContent {
float: left;
width: 670px;
border: 1px Solid #000;
}

#layout {
clear: both;
width: 970px;
border: 1px Solid #000;
}

.clear {
font-size: 0px;
height: 0px;
line-height: 0px;
clear: both;
}



With this markup:




<div id="layout">

<div id="sidebar"> Left Side Bar Content. </div>

<div id="benefitsContent"> Benefits Content</div>

<div class="clear"></div>

</div> <!-- end layout -->




Post for more help.