SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: clear

  1. #1
    SitePoint Zealot imagize's Avatar
    Join Date
    Oct 2004
    Location
    Australia
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clear

    Say you have a standard 3 column layout.

    Left Nav | content | Right Nav

    In the content, if you wanted to clear some floats using clear:both it would clear the height of both the navigations as well. Is there a workaround for this?

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    a (wrapper) float with a width of 100% in content box

    3 column bare , No 3 pixel jog, clear floats in content box, strech to any width
    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>Basic 3 Column Bare </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	*{margin:0;padding:0;}
    	
    	body{font-size:75%;background:#a2a2a2;}
    	
    	div{font-size:1em;}
    	
    	.wra{
    	margin:0 auto;
    	background:#b7b7b7;
    	}
    	.w{width:64em;margin-top:.5em;}
    	
    	.he{background:#ff8c00;}
    	
    	* html .he,* html .fo,* html .na,* html .r{ height:1%;}
    	
    	.na{background:#fbfbfb;}
    	
    	.l,.ll{ width:14em;}
    	.l{float:left;}
    	.ll{float:right;} 
    	
    	* html .r{float:left;}
    	
    	.q{background:#d8d8d8;}
    	* html .q{width:100%;}
    	head+body .q{margin:0 14em 0 14em; }
    	
    	
    	
    	.fo{background:#fbfbfb;clear:both;}
    	
    	.wra h1,.wra p,.fo p{padding:5px;}
    	
    	</style>
    </head>
    <body>
    
    <div class="wra w">
    
    <div class="he">
    <h1>header</h1>
    <p>Basic 3 Column Bare</p>
    </div>
    
    <div class="na"><p>nav</p></div>
    
    <div class="l"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div>
    
    <div class="ll"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div>
    
    <div class="r">
    <div class="q">
    <p>Content in this box must always be heigher then that of the left or right colunm</p>
    <p><a href="../../../layouts.htm">back</a></p>  
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p>
    </div>
    </div>
    
    <div class="fo"><p>footer</p></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
  •