3 replies [Last post]
superq
Offline
newbie
Last seen: 18 years 11 weeks ago
Joined: 2004-09-17
Posts: 5
Points: 0

I have a problem with two div's inside another div with a background.
This screenshot, shows, at the bottom, how it should be shown (IE and Opera), and at top is how Firefox and Netscape shows it.
So why does the background stops in firefox?

Screenshot:
http://superq.dk/version4/html/gfx/firefox-vs-ie.jpg

HTML:
<div id="content">

<div id="left">text</div>
<div id="right">test</div>

</div>

CSS:
#content {
position:relative;
width:680px;
background:url("../gfx/site/site_bg.gif");
border-left: 10px solid #fff;
border-right: 10px solid #fff;
background-color: #F7F3EF;
margin:0 auto;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;

}
#left {
position: relative;
width: 480px;
border: 1px solid #000;
text-align: left;
padding-right: 20px;
float:left;

}
#right {
position: relative;
width: 150px;
border: 1px solid #000;
text-align: left;
padding-left: 20px;
float:left;
}

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

div-box problem with Firefox

YOu need a clearing element or marker on the content div. Because both child divs are floated, they stop pushing the content div to their own height.

A quick and simple solution (just to show that it is the case), is to add a clearing element in the html, as the last thing inside the content div (after the floated inner divs, but before the end tag of the content div).

Something like, <br style="clear: both;" /> should do it.

However, our very own Tony, leader of the revolution... sorry, of this site, conjured up a fantastic work around which involves no extra HTML element such as this br above.

Here's the link: http://www.csscreator.com/css-forum/ftopic3186.html

Smile

The next sentence is true. The previous sentence is false. Discuss...

superq
Offline
newbie
Last seen: 18 years 11 weeks ago
Joined: 2004-09-17
Posts: 5
Points: 0

Thanks

Works great! Thank you very much. Quick and simple and just what I was looking for Smile

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 18 years 18 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

div-box problem with Firefox

That actually helped with my layout, as well! Thanks a bunch!

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!