6 replies [Last post]
marksin
Offline
newbie
Last seen: 15 years 30 weeks ago
Joined: 2004-03-24
Posts: 4
Points: 0

Hi, I'm trying to convert a friend's site from tables to all CSS layout, and am facing a strange problem. For the most part, the site is just one column, and pretty simple to lay out, but on the bottom, there are two "modules," which I'm lining up using float:left. It works great in IE6 and Opera, but in Netscape 7 and Firefox the background color of my container disappears.

Here's a sample URL:
http://www.bigempire.com/sake/saketest.php

(The background will eventually be white, but I put in some dramatic colors to make it easier to see what's going on)

Here's the relevant code:

<html>
<head>

<link rel="stylesheet" href="sakestylestest.css" type="text/css">

<title>Sake-Drenched Postcards - Zen in a Teacup: The Way of Tea</title>

</head>

<body>

<div id="container">

	<div id="content">
		<h1>Headline</h1>
		<p>Body</p>
	</div>
	
	<div id="bottomLeftModule">
		<p class="linktext"><a href="newsroom.html">Want to tell Captain Japan something?</a><br><br>
		<a href="archive.html">Check out the Sake archive</a></p>
		<form>
		<SCRIPT language="JavaScript"><!--
		
			function e_friend(e_add,subject1) {
	
				subject1="Sake Drenched Postcards";
				window.location="mailto:"+e_add+"?subject="+subject1+"&body=Check it out at http://www.bigempire.com/sake/index.html";
	
			}
	
		//--></SCRIPT>
		
		<p class="linktext">Enter an email address and send this page to a friend<br><br>  
		<INPUT TYPE="text" NAME="emadd" SIZE="30"><br>
		<INPUT TYPE="button" Value="Tell a Friend" onClick="e_friend(this.form.emadd.value)"></p>
		</form>
	</div>
	
	<div id="bottomRightModule">
		<div class="picksHeader"><a href="http://www.amazon.com/thebigempire"><img border="0" src="images/spacer.gif" alt="Captain's Picks" width="300" height="32"></a></div>
		<p class="pick"><img border="0" src="images/music_icon.gif" width="10" height="10">&nbsp;Rovo - <a href="http://www.amazon.com/exec/obidos/ASIN/B000063BUU/thebigempire/" target="_new">Tonic 2001 </a></p>
		<p class="pick"><img border="0" src="images/music_icon.gif" width="10" height="10">&nbsp;Notwist - <a href="http://www.amazon.com/exec/obidos/ASIN/B000159EJW/thebigempire/" target="_new">Different Cars &amp; Trains</a></p>
		<p class="pick"><img border="0" src="images/book_icon.gif" width="10" height="10">&nbsp;George Orwell - <a href="http://www.amazon.com/exec/obidos/ASIN/0062737384/thebigempire/" target="_new">Down and Out in Paris France</a></p>
	</div>

</div>

</body>
</html>

And the CSS:

	body {
		margin: 0 0 0 0;
		padding: 0;
		background:#333366;
	}
		
	#container {
		position: relative;
		margin: 0;
		text-align: left;
		width: 640px;
		background:#FF3;
	}
	
	#bottomLeftModule {
		margin: 6px;
		width:300px;
		float: left;
	}

	#bottomRightModule {
		margin-top:20px;
		border: 1px solid;
		width: 300px;
		float: left;
	}

marksin
Offline
newbie
Last seen: 15 years 30 weeks ago
Joined: 2004-03-24
Posts: 4
Points: 0

Background color breaking due to floated divs in Mozilla/NS

By the way, I do have one solution for fixing this problem, and that is to apply a background image to my body, but since this is a learning experience, I'd like to try to solve it without resorting to that if possible.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 23 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Background color breaking due to floated divs in Mozilla/NS

I think you closed your bounding div with the background before the two modules.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

marksin
Offline
newbie
Last seen: 15 years 30 weeks ago
Joined: 2004-03-24
Posts: 4
Points: 0

Background color breaking due to floated divs in Mozilla/NS

DCElliott wrote:
I think you closed your bounding div with the background before the two modules.

Really? Where do you see that? I was very careful to make sure that wasn't happening, and in the sample code I posted, unless I'm crazy, I don't think that's true.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 23 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Background color breaking due to floated divs in Mozilla/NS

Oopsie - my bad. Try this just after your last module before you close the container div (which is in the right place after all :oops: )

<div style="height:1px;clear:both;"></div>

or if you want to be more elegant - create a class 
.clear {
display:block;
height:1px;
clear:both;
}
and use it as
<div class="clear"></div>
The floats aren't pulling the background down with them and placing an unfloated div below with a clear will reassert the container div below the floats.

BTW - very tasteful page in terms of layout and pictures and arrangment of text. I'm not 100% crazy about the yellow background - is there a faint Japanese ink drawing that could be used, or a rice-paper texture?

If you want to experiment, try for your #container:
background-image: url('http://www.w3.org/StyleSheets/Core/source/graphics/textura.GIF');
or
background-image: url('http://www3.ns.sympatico.ca/d.elliott/bamboo_sm.png') no-repeat fixed 25% 50%;

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

marksin
Offline
newbie
Last seen: 15 years 30 weeks ago
Joined: 2004-03-24
Posts: 4
Points: 0

Background color breaking due to floated divs in Mozilla/NS

DCElliott wrote:
The floats aren't pulling the background down with them and placing an unfloated div below with a clear will reassert the container div below the floats.

Yes! This did the trick. Thanks!

Quote:
BTW - very tasteful page in terms of layout and pictures and arrangment of text. I'm not 100% crazy about the yellow background - is there a faint Japanese ink drawing that could be used, or a rice-paper texture?

Thank you very much. And don't worry. I only added the yellow background for testing purposes. Sometimes it's easier to see mistakes with a bright, crazy color. When all is said and done, the background will be plain white -- the articles tend to be long and I find it hard to read text against background images. Thanks again for the tip.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 23 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Background color breaking due to floated divs in Mozilla/NS

Eric Meyer has a typically excellent article on why floats poke out of their parent blocks and how to deal with it: http://www.complexspiral.com/publications/containing-floats/

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS