...

View Full Version : Div does not expand to fit pictures.



CaptainB
05-15-2008, 04:14 PM
I got a problem with some pictures which are floating outside the div / the div is not expanding as it should do.
Problem does occour in FF and not IE6.

If you go here: -removed url- and scroll to the bottom you'll see what I mean: The two 'valid-images' are floating outside the background, at least it looks like that. But they SHOULD be contained in the div = the background should expand to fit them, but it doesn't.

The relevant code:

Xhtml:


---more code above this---
<div id="footer">
Copyright &copy; Behrentzs | 2008 | All rights reserved<br/><br/>

There are 0 registered members and 1 guests viewing the site.<br/><br/><img src="images/css.png" alt="Valid CSS" /><img src="images/xhtml.png" alt="Valid XHTML" />
</div>
<div class="clear"></div>
</div>

Css:


#footer { width:920px;
height:23px;
float:left;
text-align:center;
margin-top:6px;
line-height:7px;
font-size:9px;
font-weight:bold;
}

.clear { clear:both; /*Clearing floats to fix layout*/
font-size:0px;
}

effpeetee
05-15-2008, 04:33 PM
Seems OK here.

Frank

CaptainB
05-15-2008, 04:37 PM
No it doesn't. This is how it should look:

jcdevelopment
05-15-2008, 04:37 PM
effpeetee, if you look at the bottom the two validated images are sneaking past the container just a bit.

effpeetee
05-15-2008, 04:40 PM
This is at 400&#37; in IE7 on my PC

Frank

CaptainB
05-15-2008, 04:41 PM
Pete, as Jsd said, the images are still sneaking out of the div. Look at the screen I posted - that's how it should look. But unfortunately it only does in IE6.

maxvee8
05-15-2008, 04:46 PM
take the height off the footer.. ure telling to stay that height

effpeetee
05-15-2008, 04:46 PM
Sorry. I can't see any difference, but I only have IE7

Frank

_Aerospace_Eng_
05-15-2008, 04:47 PM
How do you expect the footer to contain those buttons when the content inside it exceeds 23px in height? Also why are you floating the footer? No need for the height and no need to float it. This works

#footer { width:920px;

text-align:center;
margin-top:6px;
line-height:7px;
font-size:9px;
font-weight:bold;
clear:both;
}
BTW the buttons were poking out in Firefox 3 Beta 5 as well.

CaptainB
05-15-2008, 04:49 PM
WHY didn't I think of that! Of course it was the height that caused the issue. Changed it to +45px and it worked out.

Thanks all!

EDIT: Removed the height completely, fixed the problem aswell.

CaptainB
05-15-2008, 04:57 PM
Frank, only fixed it @localhost so far.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum