CSS/DIV layout help please

[Mr Brown]

Hi,

I have a div <div class="lrgBG">, followed by a footer div <div class="lrgFooter">. I have an image and a table in the lrgBG div, image is floating left and the table is floating right.

the problem is, which you can see below is that in firefox the lrgBG div doesn't seem to be holding the IMG & Table, and not expanding to the height of them.

this is what i need help with please.

Looks correct in IE allthough CSS is wrong

This is in Firefox, the div container does not wrap round the image and table

page prob http://www.webfroot.co.uk/csshelp/auction-detail.html
css 1 http://www.webfroot.co.uk/csshelp/css/global.css
css 2 http://www.webfroot.co.uk/csshelp/css/layout.css

#rcont {
float: right;
height: auto;
width: 536px;
}

.lrgBG {
background-image: url(../images/auction-mainlayout/content-lrg-bg.gif);
height: auto;
width: 536px;
margin: 0px;
padding: 0px;
float: none;
clear: both;
white-space: nowrap;
}

h3 {

font-size: 10px;
text-align: right;
padding-right: 5px;
padding-top: 4px;
}

.lrgBG img {
height: 250px;
width: 250px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 8px;
float: left;
}

.lrgAuctionTable {
width: 250px;
float: right;
height: auto;
background-color: #FF9000;
}

.lrgFooter {
background-image: url(../images/auction-mainlayout/content-lrg-footer.gif);
background-repeat: no-repeat;
height: 17px;
margin: 0px;
padding: 0px;
}



<div id="rcont">
<!-- AUCTION DETAILS -->
<div class="lrgBG">
<h3> DETAILS </h3>
<img src="images/auction-images/ipodLRG.jpg" />
<table class="lrgAuctionTable" cellspacing="1" summary="This table is the basic information for the IPOD sale">
<caption>CAPTION FOR TABLE</caption>
<tr>
<th id="retailprice">TH</th>
<td headers="retailprice">TD</td>
</tr>
<tr>
<th id="sale">TH</th>
<td headers="sale">TD</td>
</tr>
<tr>
<th id="enddate">TH</th>
<td headers="enddate">TD</td>
</tr>
</table>
</div>
<div class="lrgFooter"></div>
</div>

I hope I make sense, the images should get my problem across.
Thanks in advance
Ryan

[drhowarddrfine]

I don't know why but I'm having trouble with my dev tools right now.

The problem you are having is not Firefox but IE. Never assume that if something works in IE that there is something wrong with other browsers. In this case, IE is expanding content to include floated elements. Since floated elements are removed from the normal flow, this should NOT happen and this is a bug in IE. Firefox is behaving properly.

Now until I can figure out what's wrong with my dev tools, you need to google for "clearing floats".

[kestrel]

just validate the css and everything will be perfect
http://jigsaw.w3.org/css-validator/

[Mr Brown]

Hi

Thanks for your quick reply it's appreciated, I will check it out with the validation and look into clearing cheers.

While I am doing this any more posts are welcome =)

I did say in my post that my css was wrong, even though it looked right in IE :( :)

thanks again

[Mr Brown]

I have validated the xhtml and css which it has passed succesfully, cant see how that would have displayed the problem?

[Mr Brown]

after reading up on clearing floats I had found this code to resolve the problem.

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

-->

I would add the class .clearfix to the container holding the image & table.

I am not sure how compatable this fix is with browsers, i have i.e 6 firefox 1.5.0.7 netscape 7 & opera installed and it works fine.