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

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
css 1
css 2

#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">
<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>
<th id="retailprice">TH</th>
<td headers="retailprice">TD</td>
<th id="sale">TH</th>
<td headers="sale">TD</td>
<th id="enddate">TH</th>
<td headers="enddate">TD</td>
<div class="lrgFooter"></div>

I hope I make sense, the images should get my problem across.
Thanks in advance
Oct 12 '06 #1
Share this Question
Share on Google+
5 Replies

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

Expert 100+
P: 1,071
just validate the css and everything will be perfect
Oct 12 '06 #3

P: 4

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 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.