help with CSS float 1

jemminger · Jun 8, 2004

hi all,

how can i get the "outerContainer" div to wrap its background around the two inner divs? currently they hang outside because of float:left;

essentially i'm trying for this layout using no tables:
[tt]
+------------------+
|+------+ +-------+|
|| | | ||
|| left | | right ||
|| | | ||
|+------+ +-------+|
+------------------+
[/tt]

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
	<head>
		
		<title>test</title>

		<style type="text/css">
			#outerContainer {
				background-color:#cccccc;
				padding:5px;
			}
			#innerLeft, #innerRight {
				background-color:#ffffff;
				border:1px solid #ff0000;
				padding:5px;
				margin:5px;
				float:left;
			}
		</style>
	</head>
	<body>
		<div id="outerContainer">
			<div id="innerLeft">innerLeft</div>
			<div id="innerRight">innerRight</div>
		</div>
	</body>
</html>

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

dustbuster · Jun 8, 2004

If you set your outerContainer width then it will work:

Code:

#outerContainer {
     background-color:#cccccc;
     padding:5px;
     width: 100%;
}

jemminger · Jun 9, 2004

thanks dustbuster, but it only works in ie. any way to get it working in mozilla too?

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

kenrbnsn · Jun 9, 2004

You probably want to use a clearing <DIV>. In your styles section define:

Code:

div.clearer {
   clear: both;
   line-height: 0 }

Then before your closing </div> in your code put:

Code:

<div class=clearer>&nbsp;</div>

I've made it a habit to use these all the time.

Ken

dustbuster · Jun 9, 2004

I tested it in opera but not mozilla.

The clear: both should do it.

jemminger · Jun 9, 2004

kenrbnsn,

perfect - thanks!

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

help with CSS float 1

jemminger

Programmer

dustbuster

Programmer

jemminger

Programmer

kenrbnsn

Technical User

dustbuster

Programmer

jemminger

Programmer

Similar threads

Part and Inventory Search

Sponsor