SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Zealot manoloweb's Avatar
    Join Date
    Aug 2003
    Location
    Mexico
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float + float + clear + clear

    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!

  2. #2
    SitePoint Zealot manoloweb's Avatar
    Join Date
    Aug 2003
    Location
    Mexico
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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... ;-)

  3. #3
    SitePoint Member
    Join Date
    May 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This works for me

    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

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    SitePoint Zealot manoloweb's Avatar
    Join Date
    Aug 2003
    Location
    Mexico
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •