Firefox overflow: auto problem

Associate
Joined
3 Feb 2006
Posts
100
Location
The Shire (of Hertford)
Hi there,

I'm trying to set up a liquid 3 column page.
There's a div for header, leftnav, rightnav and content
I'm floating the left and right navs and am planning to float mainly images in the content

To try and make the border wrap around the content floats I have used overflow:auto; in the CSS for the content

This works fine for in IE7 but in firefox there's an extra indent that i can't seem to get rid of.

Could anyone point me in the right direction please

Thanks

Sunrunner

HTML

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

tincidunt ut.
</p>
</div>
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>

<div class="hpspecialoffer">

<img src="ditem.gif" alt="Special Offer 1" title="View Special Offer 1" height="60px"

width="60px"/>
<p>Text about special offer 1</p>

<a href="" class="buybutton">Buy</a>

</div>

</div>
<div id="footer">
Footer
</div>
</div>

CSS

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
overflow:auto;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

.hpspecialoffer
{
float: left;
width: 60px;
border: 1px solid #999;
}

.hpspecialoffer p
{
font-size: 0.7em;
line-height: 120%;
}
 
think I may have sorted it by using a <div class="clear"></div> before the content div closes.

Fingers crossed !
 
nope its still there and the content keeps spilling over in IE7 if overflow:auto is not used !!!!!!

Any ideas whats going on ?

Any help would be gratefully received :)
 
Back
Top Bottom