Float + float + clear + clear

**manoloweb** · Apr 27, 2005 16:19

I'm having an issue with floating columns.

I use the 3 column layout based on this:

-Left = float
-Right = float
-Center = margins

Everything works like a charm. Except whan I want to "clear" something inside the center block.

Let's say that I have some news highlights with a picture floated to the left and the extract wrapped around it. And I want the next item to be cleared from the previous. If I put "clear:left" to that item, it gets cleared from everything (including the left-most menu) in some browsers (read as IE).

I believe that it is the actual CSS behavoir, because the rule says that clear should get rid of any floated element in the specified direction (left, right or both) not just the immediate floated elements.

What can I do if I just want to make it clear the previous block and not the entire floating menus? Any ideas?

Greetings!

**manoloweb** · Apr 27, 2005 17:41

I have some images to illustrate my problem...

a) This is what I need:

b) And this is the problem I have:

I hope it helps to clarify the problem, and hopefully someone may come with a solution... ;-)

**leobender** · May 3, 2005 13:08

I have found that wraping the entire center "Content" column with a "overflow: hidden;" fixes this.

ie:

<div style="overflow: hidden;">
<img>
<img>
<img>
</div>

GL,
Tony

**all4nerds** · May 3, 2005 14:20

Hello

With a fixed width layout make the Center Column Floating

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	body{
	text-align: center;
	margin:0px;
	padding:0px;
	background-color:#b2b2b2;
	}
	
	div,p,span{
	font-family:Arial,Verdana, Geneva , Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	margin:0px;
	padding:0px;
	text-align:left;
	}
	
	.mcon{
	top:0px;
	left:0px;
	width:754px;
	}
	
	.acon{
	width:754px;
	background:#bababa;
	}
	
	.con{
	width:754px;
	background: #c9c9c9;
	}
	
	.nav{
	width:107px;
	background: #8dabef;
	}
	
	.txt{padding:2px;color:#797979;background:#e0e0e0;}
	.tr{text-align:right;}
	.tc{text-align:center;}
	
	.po{padding:0px;}
	.pb{padding:2px;}
	.pc{padding:10px;}
	
	.ma{
	margin-left:auto;
	margin-right:auto;
	}
	
	.mt{margin-top:10px;} /* */
	.ml{margin-left:10px;}
	.mr{margin-right:10px;}
	.mb{margin-bottom:10px;}
	
	.mlin{margin-left:10px;}
	.mrin{margin-right:10px;}
	
	.mtp2{margin-top:12px;}
	
	
	.w{width:103px;}
	.wx{width:153px;}
	.wty{width:418px;}
	.wtz{width:274px;}
	
	.wc{width:754px;}
	.wca{width:754px;}
	
	.wnc{width:104px;}
	
	.bl,.b,.bb{
	border-color:#f8f8f8;
	border-style: solid;
	border-width: 1px 0 1px 1px;
	}
	
	.b{border-width: 1px 1px 0 1px;}
	.bb{border-width: 1px 1px 1px 1px;}

	
	a{
	padding-top:2px;
	padding-bottom:2px;
	text-decoration: none;
	text-align: center;
	}
	
	a:visited{
	background:#8dabef;
	color: #787878;
	}
	
	a:hover{
	background:#ffcc00;
	color: #787878;
	}
	
	.fl{float:left;}
	.fr{float:right;}
	.clf{clear:both;}

	</style>
	<!--[if IE]>
 	<style type="text/css">
	* html .mr{margin-right:5px;}
	* html .ml{margin-left:5px;}
	</style>
	<![endif]-->
</head>
<body>
<div class="mcon ma">  

<div class="acon mt mb">
  
<div class="con">

<div class="pc tc"><br /><br />
header<br /><br /><br />
</div>
<div class="con"><span>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bb wnc">Contact Us</a></span>
</div>
<div class="clf"></div>


<div class="con">

<div class="txt fr wx mlin mb">
ay Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> 
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br />
</div>

<div class="txt fl wx">
az Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br />Text<br /> Test<br />
Text<br /> Test<br />Text<br /> Test<br />
</div>

<div class="txt bb po fl mlin mt wty mb">

<div class="txt fl w bb mt ml">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="txt fr w bb mt mr">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="clf"></div>


<div class="txt fl w bb mt ml">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="txt fl wtz bb mt mlin">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="clf"></div>


<div class="txt fr w bb mt mr mb">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="txt fl w bb mt ml mb">
Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />Text <br />
</div>
<div class="clf"></div>

</div>

<br class="clf" />
<div class="con wc">
<div class="txt pc tc">
<br />
footer<br /><br />
</div>

</div>

</div>
<div class="clf"></div>

</div>
</div>
</div>
</body>
</html>

**manoloweb** · May 11, 2005 02:31

Wow!!!

That is a great piece of CSS layout code! And it works as expected, at least with dummy text. Thanks a lot.

I will have a bad time decoding your class names and id's, and then I will need to run a few tought crash tests before I can use it... but it sure worth it!

Again, thank you so much.

**all4nerds** · May 11, 2005 03:29

Hello

decoding ? ,

My suggestion, tip build your own CSS "LIBRARY"

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	body{
	text-align: center;
	margin:0px;
	padding:0px;
	background-color:#b2b2b2;
	}
	
	div,p,span{
	font-family:Arial,Verdana, Geneva , Helvetica, sans-serif;
	font-size:12px;
	color:#ffffff;
	margin:0px;
	padding:0px;
	text-align:left;
	}
	
	.mcon{	margin-left:auto;
	margin-right:auto;
	top:0px;
	left:0px;
	width:754px;
	} 
	.bca{
	background:#ffffcc;
	}
	.bcb{
	background:#ccffff;
	}
	.bcc{
	background:#ccffcc;
	}
	.bcy{
	background:#ffff99;
	}/* */
	
	
	.acon{
	width:754px;
	background:#bababa;
	}
	
	.con{
	width:754px;
	background: #c9c9c9;
	}
	
	.nav{
	width:107px;
	background: #8dabef;
	}
	
	.txt{padding:2px;color: #797979;background: #e0e0e0;}
	.tr{text-align:right;}
	.tc{text-align:center;}
	
	.po{padding:0px;}
	.pb{padding:2px;}
	.pc{padding:10px;}
	
	.ma{
	margin-left:auto;
	margin-right:auto;
	}
	
	.mt{margin-top:10px;} /* */
	.ml{margin-left:10px;}
	.mr{margin-right:10px;}
	.mb{margin-bottom:10px;}
	.mlin{margin-left:10px;}
	.mrin{margin-right:10px;}
	
	.mtp2{margin-top:12px;}
	
	.mto{margin-top:0px;}
	.mlo{margin-left:0px;}
	.mro{margin-right:0px;}
	.mbo{margin-bottom:0px;}
	
	.w{width:103px;}
	.wt{width:622px;}
	.wtb{width:304px;}
	.wtbb{width:299px;}
	.wtbx{width:302px;}
	
	.wc{width:734px;}
	.wca{width:754px;}
	
	.wnc{width:104px;}
	
	.t{top:2px;}
	
	.bl,.b,.bb,.btl,.bbr{
	border-color:#f8f8f8;
	border-style: solid;
	border-width: 1px 0 1px 1px;
	}
	
	.bcbl{border-color:#000000;}
	
	.b{border-width: 1px 1px 0 1px;}
	.bb{border-width: 1px 1px 1px 1px;}
	.btl{border-width: 1px 0px 0px 1px;}
	.bbr{border-width: 0px 1px 1px 0px;}
	.bo{border-width: 0 0 0 0;}
	
	a{
	display:inline-block;
	padding-top:2px;
	padding-bottom:2px;/*  */
	text-decoration: none;
	text-align: center;
	}
	
	a:visited{
	background:#8dabef;
	color: #787878;
	}
	
	a:hover{
	background:#ffcc00;
	color: #787878;
	}
	
	.fl{float:left;}
	.fr{float:right;}
	.clf{clear:both;}
	
	.ofa{overflow:auto;}
	.ofh{overflow:hidden;}
	
	.dilb{display:inline-block;}

	.r{position:relative;}
	.a{position:absolute;}
	
	img{display:block;}
	</style>
	<!--[if lt IE 7]>
 	<style type="text/css">
	* html .mr{margin-right:5px;}
	* html .ml{margin-left:5px;}
	</style>
	<![endif]-->
</head>
<body><!-- -->
<div class="mcon ofh">

<div class="wca"><img src="r.gif" width="754" height="1" alt="" /></div>  

<div class="acon mt mb">
  
<div class="con">
<div class="pc tc"><br />
header<br /><br />
</div>
<div class="con"><span>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bb wnc">Contact Us</a></span>
</div>
<div class="clf"></div>

<div class="con">

<div class="txt fl w mt">
acc Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> 
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br />
</div>


<div class="txt fl mlin mr mt wtb">
b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
</div>

<div class="pb bb fr wtbx mr mt">
azz Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
</div>

<div class="txt fr wt mt mr">
112345 Test Text Test<br /> 
Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
</div>

<div class="pb fl w mt">
a Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br />
</div>

<br class="clf" />
</div>
</div>

<div class="con wc pc">
<div class="txt pc tc">
<br />
footer<br /><br />
</div>

</div>

</div>
<div class="clf"></div>
</div>

<div class="mcon ofh">

<div class="ma wca"><img src="r.gif" width="754" height="1" alt="" /></div>  

<div class="acon ma mt mb">
  
<div class="con">
<div class="pc tc"><br />
header<br /><br />
</div>
<div class="con"><span>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bb wnc">Contact Us</a></span>
</div>
<div class="clf"></div>

<div class="con">

<div class="txt bb fl ml mt wtb">
b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
</div>

<div class="po fr wtb mtp2">
ax Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br /> Test<br />
  
<div class="txt bl pb wtbb mt r t">
a Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br />
</div>  
</div>

<div class="txt bb fr w mt mrin">
aaa Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> 
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br />
</div>


<div class="pb fl wtb ml mt">
a Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br />
</div>

<br class="clf" />
</div>
</div>

<div class="con wc pc">
<div class="txt pc tc">
<br />
footer<br /><br />
</div>

</div>

</div>
<div class="clf"></div>
</div>

 
<div class="mcon ofh">

<div class="ma wca"><img src="r.gif" width="754" height="1" alt="" /></div>

<div class="acon ma mt mb">
  
<div class="con">
<div class="pc tc"><br />
header<br /><br />
</div>
<div class="con"><span>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bb wnc">Contact Us</a></span>
</div>
<div class="clf"></div>

<div class="con">

<div class="txt fr w mt">
a Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> 
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br />
</div>


<div class="txt fl ml mt wtb">
b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
</div>

<div class="pb bb fl mlin wtbx mt">
a Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
</div>

<div class="txt fl wt mt ml">
112345 Test Text Test<br /> 
Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Test<br /> Test<br />
</div>

<div class="pb fl w mt mlin">
a Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br />
</div>

<br class="clf" />
</div>
</div>

<div class="con wc pc">
<div class="txt pc tc">
<br />
footer<br /><br />
</div>

</div>

</div>

<div class="clf"></div>
</div>

<div class="mcon ofh">

<div class="ma wca"><img src="r.gif" width="754" height="1" alt="" /></div>  

<div class="acon ma mt mb">
  
<div class="con">
<div class="pc tc"><br />
header<br /><br />
</div>
<div class="con"><span>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bl">Latest News</a>
<a href="##" class="nav fl bl">Home</a>
<a href="##" class="nav fl bb wnc">Contact Us</a></span>
</div>
<div class="clf"></div>

<div class="con">

<div class="pb fl mt w ">
b Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br /> 
Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
</div>

<div class="po fr wtb mt mr mlin">
<div class="txt fr wtbb">
afff Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br />
</div>
<br /><br />ax Test Text Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Text<br /> Test<br /> Text<br />Text<br />
</div>

<div class="txt bb fr w mt">
aaa Text<br /> Test<br /> Text<br /> Test<br /> Test<br /> Text<br /> 
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br /> Test<br /> Text<br />
Test<br /> Text<br /> Test<br /> Text<br />
</div>


<div class="txt fl wtb mt">
az Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br /> Test<br />
Text<br /> Test<br /> Text<br />Text<br />Text<br />
</div>
<br class="clf" />
</div>
</div>

<div class="con wc pc">
<div class="txt pc tc">
<br />
footer<br /><br />
</div>

</div>

</div>
<div class="clf"></div>
</div><!-- -->
</body>
</html>

User Tag List

Thread: Float + float + clear + clear

Thread Tools

Display

Float + float + clear + clear

This works for me

Bookmarks

Bookmarks

Posting Permissions