SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed height div!

    I just received a psd for a 100% height layout with a sticky footer, which you can see here! They wish to have a fixed height content div in the example left. The content div should have margins of 30px around top, bottom and left). I tried Paul O'bs method with a fixed div holding the background but I can't get the margin at the bottom to work. This is what I have:

    HTML Code:
    <!-- #wrapper -->
    <div id="wrapper">
      <div id="header"></div>
      <div id="content">
      
      </div>
      <div class="col"></div>
    </div><!-- #wrapper -->
    
    <!-- #footer -->
    <div id="footer">
    
    </div><!-- #footer -->
    Code:
    html, body {
    	width: 100%;
    	height: 100%;
    }
    
    #wrapper {
    	width: 100%;
    	min-height: 100%;
    	margin-top: -75px;
    	position: relative;
    	clear:both;
    	z-index: 4;
    	overflow: hidden;
    	font-size: .8125em;
    	background: ;	
    }
    
    * html #wrapper{
    	height:100%;
    }
    
    #footer {
    	width: 100%;
    	min-height: 75px;
    	position: relative;
    	clear:both;
    	z-index: 5;
    	font-size: .8125em;
    	background: url(../images/site/footer.png) 0 0;	
    }
    
    #wrapper #header {
    	width: 100%;
    	border-top: 75px solid #FFF;
    }
    
    #wrapper #content {
    	width: 320px;
    	position: fixed
    	top: 60px
            left: 30px;
    	z-index: 1;
    }
    
    .col {
    	width:320px;
    	height: 9999em;
    	position: fixed;
    	z-index:0;
    	top: 60px;
    	left: 30px;
    	bottom:105px;
    	background: url(../images/site/content.png);
    }
    
    html>body .col {
    	top: 60px;
    }
    The bottom margin isn't there the content is going all the way down. What am I doing wrong or is this simply not the right approach?

    Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I take the top position out (60px), the bottom position is working, but then the top position is not working since I have declared an extreme height so then the background is going all the way up.. Is there any other way to accomplish what I want?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure to which issue you really want to address. If its just the left sidebar then set it as position:absolute and give it a top and bottom position at the same time and set it to overflow:auto.

    e.g.Like this example.

    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>Sticky Footer at Bottom</title>
    <style type="text/css">
    * {/* for demo only*/
    	margin:0;
    	padding:0
    }
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;
    }
    h1, h2, p { padding:0 10px; }
    #outer:after {
    	clear:both;
    	display:block;
    	height:1%;
    	content:" ";
    }
    html, body {
    	height:100%;/* needed to base 100% height on something known*/
    	text-align:center;
    }
    #outer {
    	width:960px;
    	background:#ffffcc;
    	margin:auto;
    	min-height:100%;
    	margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
    	text-align:left;
    	clear:both;
    	position:relative;
    }
    * html #outer { height:100% }
    #header {
    	background:red;
    	height:40px;
    	border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    #footer {/* footer now sits at bottom of window*/
    	background:red;
    	width:960px;
    	margin:auto;
    	height:40px;/* must match negative margin of #outer */
    	clear:both;
    }
    #sidebar {
    	position:absolute;
    	top:110px;
    	bottom:30px;
    	width:250px;
    	left:25px;
    	overflow:auto;
    	background:green;
    }
    #content { margin-left:300px; }
    </style>
    </head>
    <body>
    <div id="outer">
    		<div id="header">
    				<h1>Sticky Footer</h1>
    		</div>
    		<div id="content">
    				<h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
    		</div>
    		<div id="sidebar">
    				<p>Start lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text </p>
    				<p>lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text </p>
    				<p>lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text lorem ipsum text </p>
    		</div>
    </div>
    <div id="footer">
    		<p>Footer</p>
    </div>
    </body>
    </html>
    If that's not what you were after then shout

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. The sidebar part was indeed where I was after. Obviously I made it to difficult for myself. Thanks a lot. I like to wish you all the best for the new year
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by donboe View Post
    I like to wish you all the best for the new year
    and best wishes to you also

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. One last question about the CSS in your reply. I try to understand what those two pseudo classes are doing. Can you please tell me? Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The first one is an old opera fix for the sticky footer:

    Code:
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;
    }
    It places a float at the top of the body and gives it 100% height and forces the browser to redraw the footer properly. It obviously triggers some new algorithm as otherwise the footer doesn't get redrawn when the window is moved upwards. It's a long standing bug in Opera but seems fixed in latest versions although it has been fixed and subsequently reappeared before so I always leave it in place. The negative margin just pulls the float out of the way to the maximum allowed.

    The other pseudo class is a float clearing mechanism but is also needed for ie8 to function properly.

    Code:
    #outer:after {
    	clear:both;
    	display:block;
    	height:1%;
    	content:" ";
    }
    It just places generated content after the content in the element and clears it. Without it IE8 can also be stubborn to redraw the footer when the window is moved.

    If you look in the css quiz you can read up on all the reasons as they were discovered and implemented.


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
  •