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%;
}
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%;
}