By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,441 Members | 996 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,441 IT Pros & Developers. It's quick & easy.

CSS/DIV layout help please

P: 4
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
Oct 12 '06 #1
Share this Question
Share on Google+
5 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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".
Oct 12 '06 #2

kestrel
Expert 100+
P: 1,071
just validate the css and everything will be perfect
http://jigsaw.w3.org/css-validator/
Oct 12 '06 #3

P: 4
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
Oct 12 '06 #4

P: 4
I have validated the xhtml and css which it has passed succesfully, cant see how that would have displayed the problem?
Oct 12 '06 #5

P: 4
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.
Oct 12 '06 #6

Post your reply

Sign in to post your reply or Sign up for a free account.