How to clear a div without clearing the entire layout

I am having a terrible time. I have a 3 column layout. like so…

<div id=“left” style =“float:left; width: 200px;”>
Left
</div>
<div id=“right” style =“float:right; width: 200px;”>
Right
</div>
<div id=“main” style="width:600px; margin:auto; ">
Main
</div>

as you can see, my main content floats to the top and center and ignores the left and right column. My problem is by doing this. I am unable to clear anything encapsulated within main content. If I do so. That content will take notice to any content within the left and right column and will be pushed down.

Is it possible to clear areas within a div without having it clear everything outside that div

First, what sitepoint has taught me is to use external stylesheets instead of internal. Cleaner and easier.

This should work with a background (01.gif) sliced from the design across all columns so that they’re all even. It’s called “faux columns”:

HTML:

<body>
<div id="container">
	<div id="header">
		<h1>
			Site name
		</h1>
	</div>
	<div id="navigation">
		Site navigation
	</div>
	<div id="content">
		<div id="secondary">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
			</ul>
		</div>
		<div id="main">
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
		</div>
		<div id="aside">
			Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
		</div>
		<div id="footer">
			Copyright Site name
		</div>
	</div>
</div>
</body>
</html>

CSS:

#container
{
	width: 700px;
	margin: 0 auto;
}

#header { background: #999; }
h1 { margin: 0; }
#navigation { background: #ccc; }
#content { background: url(01.gif) repeat-y; }

#secondary
{
	float: left;
	width: 120px;
	margin: 0 0 0 20px;
	border: 1px solid red;
}

#main
{
	float: left;
	width: 380px;
	margin: 0 0 0 40px;
	padding: 0 0 20px;
	border: 1px solid red;
}

#aside
{
	float: right;
	width: 120px;
	border: 1px solid red;
}

#footer
{
	clear: both;
	background: #999;
}

This is from the sitepoint course I just took. It was fabulous.

you could go like this. note how I have the css and the html in one copy and paste so I save you from having piece it together.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Testing</title>
<style type="text/css">
<!--
	#left {
		float:left;
		width:200px;
		height:400px;
	}
	
	#right {
		float:right;
		width:200px;
		height:400px;
	}
	
	#middle {
		margin:auto;
		width:500px;
		[B]overflow:hidden;[/B]
	}
	
	#nested_float {
		float:left;
		width:90px;
	}
	
	div {
		border:1px solid #000;
	}
	
	#nested_nested_content {
		[B]float:left;
		width:100%;
		background:red;[/B]
	}
-->
</style>
</head>
<body>

<div id="left">
    	Left Content
</div>
    <div id="right">
    	Right Content
    </div>
    
	<div id="middle">
    	<div id="nested_float">test</div>
		<div id="nested_nested_content">test</div>
    </div>

</body>
</html>

Thanks. It does work in all. It’s not really clearing the float though. It’s only forcing the next float below because it’s to wide. So basically you’ll have to float every block in that div and give it width 100%. that’s the only way I could think of how to fix it with the constraints of your layout.

I explained that in my post. It’s a slice taken from the design across the columns. If you don’t have different colors in your column, then remove the gif. If you do have colors behind your columns, then look up “faux columns” that is the example I gave. There are other ways to do multiple columns but that is what I’m showing you.

I’ll leave it to someone else to help. Sounds like you’re not benefiting from my assistance.

well its good enough. Thanks

@EricWatson You are the man. This raises so many other questions. Does this work for all browsers ?? Why don’t people use this rather then clear:both. In any case It works so far, thanks.

I do appreciate your assistance. I just believe there is a mis understanding on what I am trying to do. Which I can completely understand because I’ve never seen this issue address before on the web.

My problem does not consist with extending my columns down to the bottom of the site. Atleast, that is what alistapart.com address faux columns to be.

If you could be so kind. This is what I want you and everyone else who would like to help do.

copy and paste this code into a html browser.

<style type="text/css">
<!--
	#left {
		float:left;
		width:200px;
		height:400px;
	}
	
	#right {
		float:right;
		width:200px;
		height:400px;
	}
	
	#middle {
		margin:auto;
		width:500px;
	}
	
	#nested_float {
		float:left;
		width:90px;
	}
	
	div {
		border:1px solid #000;
	}
	
	#nested_nested_content {
		clear:both;
	}
-->
</style>


<body>
	<div id="left">
    	Left Content
</div>
    <div id="right">
    	Right Content
    </div>
    <div id="middle">
    	Middle Content
        <div id="nest_content">
        	nested Content
            	<div id="nested_float">
                	Nested Float
                </div>
            	<div id="nested_nested_content">
                	Here is my problem. By floating a left and a right column. I can no longer clear anything within my content. Or else it will clear my left and right columns
                </div>
        </div>
    </div>
</body>

If you put that into html. I think that will better explain what my situation is.

I did inline for the example. I didnt feel like making an entire stylesheet for this example. I am not sure how your example answer my question. you created a gif and you repeated it on the y axis.