"div.scroll" does not float below background-image in Firefox

**morty** · Apr 2, 2006, 09:40

I am using a nice "div.scroll" in my layout. Unfortunately it does not work 100% in Firefox, no problems in IE and Opera! In Firefox the scrollfield is above a background-image!?

Does anyone have experience with that? I would appreciate any helpful ideas!

Thanks!

the html:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="default02.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
<div id="left"> 
<div id="contentleft"></div>
</div>
<div id="outside"><div id="background01"><h1>Welcome! </h1></div><br />
      <div class="scroll"><p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
      </div></div>
	  </div>
</body>
</html>

the css:

HTML Code:

#wrap {
background:url(images/main01.gif) top left repeat-y;
position:absolute;
height:576px;
width:890px;
top:50%;
margin-top:-288px;/* half container height*/
left:50%;
margin-left:-445px;
}
#left {
float:left;
width:445px;
padding-left: 2px;
}
#contentleft {
height:375px;
padding-left: 31px;
padding-top: 20px;
padding-bottom: 21px;
	}
#outside{
padding-right:10px;
}
#background01 {
background: url(images/background01.gif);
width: 430px;
float:right;
	}
#background01 h1 {
font-family: "Times New Roman", Times, serif;
font-size: 21px;
color: #FFFFFF;
padding-top: 70px;
padding-left: 210px;
	}
#contenttext {
padding-top:100px;
margin-left:460px;
}
div.scroll {
padding-left:20px;
height: 320px;
width: 410px;
overflow: auto;
}

**all4nerds** · Apr 2, 2006, 10:02

Hello

floats are not cleared in outside and wrap
head+body #outside:after,head+body #wrap:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

the float is not meantained
.scroll {float:right;

set all default padding and margins to 0, then adjust
*{margin:0;padding:0;}

**morty** · Apr 4, 2006, 05:43

Thanks for the help, but I can't figure what you are trying to tell me...

It does not help if I assign "clear:both" to "outside" and "wrap".

floats are not cleared in outside and wrap
head+body #outside:after,head+body #wrap:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

the float is not meantained
.scroll {float:right;

**all4nerds** · Apr 4, 2006, 06:09

Hello

ad float right to scroll

clear the floats in outside and wrap

with code block:

head+body #outside:after,head+body #wrap:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

code added

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	#wrap {
background:#ccff99 url(images/main01.gif) top left repeat-y;
position:absolute;
height:576px;
width:890px;
top:50%;
margin-top:-288px;/* half container height*/
left:50%;
margin-left:-445px;
}
#left {background:#ccffff;
float:left;
width:445px;
padding-left: 2px;
}
#contentleft {float:right;background:#ccffcc;
height:375px;
padding-left: 31px;
padding-top: 20px;
padding-bottom: 21px;
	}
#outside{
padding-right:10px;
}
#background01 {
background:#ffffcc url(images/background01.gif);
width: 430px;
float:right;
	}
#background01 h1 {
font-family: "Times New Roman", Times, serif;
font-size: 21px;
color: #FFFFFF;
padding-top: 70px;
padding-left: 210px;
	}
#contenttext {background:#ccccff;
padding-top:100px;
margin-left:460px;
}
div.scroll {
float:right;
background:#ffccff;
padding-left:20px;
height: 320px;
width: 410px;
overflow: auto;
}
head+body #outside:after,head+body #wrap:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
	</style>
</head>

<body>
<div id="wrap">
<div id="left"> 
<div id="contentleft"></div>
</div>
<div id="outside"><div id="background01"><h1>Welcome! </h1></div><br />
      <div class="scroll"><p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
	  <p>So you have a great idea that you want to turn into the Next Big Thing? Well, jump aboard the Web 2.0 bandwagon! The momentum that's building behind web applications means there's never been a better time to start reaping the rewards of your hard work.</p>
      </div></div>
	  </div>
</body>
</html>

**morty** · Apr 4, 2006, 06:38

Thanks "4allnerds"!

But it already works without:

HTML Code:

head+body #outside:after,head+body #wrap:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

Adding "float:right;" to "div.scroll" seems to do it!
I tested it in IE, Firefox and Opera.

The SitePoint Forums have moved.

User Tag List

Thread: "div.scroll" does not float below background-image in Firefox

Thread Tools

Display

"div.scroll" does not float below background-image in Firefox

Thanks

Bookmarks

Bookmarks

Posting Permissions