468,291 Members | 1,409 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,291 developers. It's quick & easy.

CSS/DIV layout help please


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">
<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
5 4317
7,435 Expert 4TB
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
1,071 Expert 1GB
just validate the css and everything will be perfect
Oct 12 '06 #3

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

Similar topics

39 posts views Thread by Zak McGregor | last post: by
47 posts views Thread by Neal | last post: by
4 posts views Thread by Rob Freundlich | last post: by
15 posts views Thread by Tamblyne | last post: by
3 posts views Thread by Samuel Shulman | last post: by
14 posts views Thread by Anoop | last post: by
reply views Thread by letsgetsilly | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.