SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2005
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer related disagreement (again)

    I have an ongoing mild disagreement with a colleague over css layout. He wasn't happy with his template layout that used absolute positioning, and asked me to re-code it, which I did using float. However, we have slightly different approaches to design. My preference is for a centred, fixed width layout. Usually I would have something like this:-
    Code:
    <div id="wrapper">
    <div id="header"><h1>Header</h1></div>
    <div id="nav">
    <ul>
    <li>Navigation</li>
    </ul>
    </div>
    <div id="content">
    <p>Some text</p>
    </div>
    <div id="footer">footer</div>
    </div>
    I would then float the navigation menu div, and give clear: both; to the footer. Thus the footer appears under everything else and "stretches" the wrapper div. My adaptation of my colleagues template simply adds a column, so we have a three column layout that roughly mimics the one above, (or would do if I had my way).

    My colleague however insists that the footer should be in the bottom of the "content" div. He says this avoids having an L-shaped area of whitespace appearing under the navigation and content, when the right hand column is taller than the content. The result is an ugly half way house, in which, on an unstyled page, content in the right hand column (news headlines, etc) appears below the footer.

    To me this is nonsense - I want the footer at the bottom, below everything else. Placing the footer where he wants it doesn't remove the L-shaped area of whitespace, it simply moves it somewhere else. It also means that I have to add an empty div in the bottom of the wrapper div to stretch it. There is content below the footer. The footer, and thus his link to "top of page", may end up appearing well above the right hand column, and potentially even have disappeared out the top of the viewport while a user is looking at the bottom of the page; because content editors can potentially add numerous boxes to this div, outside his control. Yet I cannot convince him that his approach is wrong - in order to eliminate one slight visual problem (which could be removed some other way, e.g. using a "faux columns" background to the wrapper div) he is creating a host of other more drastic problems. In my view this is plain stubbornness.

    Am I right? Is he? Does the issue of content appearing below the footer in an unstyled page actually matter? (He thought it did, until I told him the only way to solve the problem was to place the footer where I suggested, at which point he backtracked and said it wasn't important!)

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

    ? L shape ?

    a 3 column design, all columns can be the highest
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>12345 12345 12345 12345 12345</title>
    	<style type="text/css">
    	
    	* {margin:0;padding:0}
    	
    	body{font-size:75%;background:#a2a2a2;}
    	
    	body i{color:#909090;}
    	
    	div{font-size:1em;}
    	
    	head+/**/body .fc:after {
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both;
    	visibility:hidden;
    	}
    	/* \*/
    	* html .fc{height:1%;}
    	*+html .fc{display:inline-block;}
    	/*  */
    	
    	.wra{background:#909090;}
    	
    	.wra,.fo{border:1px solid #000000;}
    	
    	.w{width:64em;margin:.5em auto 0 auto;}
    	.wx{width:90%;}
    	
    	.he{background:#ff8c00;border-bottom:1px solid #000000;}
    	
    	.na,.fo{background:#fbfbfb;}
    	
    	.bo{border-bottom:1px solid #000000;}
    	
    	.aur{background:#d8d8d8;border-right:1px solid #000000;}
    	
    	.aul{background:#b7b7b7;border-left:1px solid #000000;}
    	
    	.aur{margin:0 18em 0 0;}
    	.aul{margin:0 0 0 18em;}
    	.l,.ll{position:relative;width:18.01em;}
    	.l{margin:0 0 0 -18em;float:left;/*left:-100%;*/}
    	.ll{margin:0 -18em 0 0;float:right;}
    	
    	.r{width:100%;float:left;}
    	head+/**/body .r{width:99.9%;}
    	
    	.fo{border-top:none;margin:0 auto;}
    	
    	.wra h1,.wra p,.fo p{padding:5px;}
    	
    	
    	</style>
    </head>
    <body>
    <div class="wra w">
    
    <div class="he bo">
    <h1>header</h1>
    <p>Basic 3 Column Bare</p>
    </div>
    <div class="na bo">
    <p>navigation</p>
    </div>
    
    <div class="aur">
    <div class="aul fc">
    
    <div class="l">
    <p>
    start
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </div>
    
    <div class="r">
    <p>
    start
    
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </div>
    
    <div class="ll">
    <p>
    start
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end
    </p>
    </div>
    
    </div>
    </div>
    
    </div>
    
    <div class="fo w"><p>footer</p></div>
    
    <p><i>&nbsp;&copy; b. bakker</i></p>
    
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2005
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    ? L shape ?

    a 3 column design, all columns can be the highest
    Nice - but what's this all about?
    Code:
    	head+/**/body

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

    clear the floats
    head+/**/body .fc:after {/*for all min-height browsers but not IE7*/
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    /* \*/
    * html .fc{height:1%;} /*IE < 7*/
    *+html .fc{display:inline-block;} /*IE > 6*/
    /* */

    IE7 filters
    http://nanobox.chipx86.com/blog/2006...ks-for-ie7.php


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
  •