SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My sidebars do not extend all the way down to the footer. Why?

    You can see my white-colored sidebars are not extending all the way down to the footer. Anyone know why?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>3 col layout with equalising columns and footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    body {
    	padding:0 20px 0 20px;
    	color: #000000;
    	background:#000;
    	text-align:center;
            min-width:905px;
    }
    #wrapper{
    	//background:#f2f2f2 url(leftcolbg.jpg) repeat-y left top;
    	width:auto;
    	//border:1px solid #000;
    	min-width:905px;
    	max-width:1200px;
    	text-align:left;
    	margin-left:0 auto;
    	margin-right:0 auto;
    	position:relative;
    }
    #outer{
    	margin-left:165px;
    	margin-right:165px;
    	background:silver;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	color: #000000;
    }
    #header{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:70px;
    	line-height:70px;	
    	border-bottom:1px solid #000;
    	overflow:hidden;
    	color: #fff;
    	background:#f2f2f2 url(images/blogphoto.jpg) repeat-x left top;
    	text-align:center;
    	font-size:xx-large
    }
    #left {
            background:#fff url(corner-left.jpg) no-repeat left top;
    	position:relative;/*ie needs this to show float */
    	width:165px;
    	float:left;
    	margin-left:-164px;/*must be 1px less than width otherwise won't push footer down */
            top:-1px;
    	left:-1px
    }
    * html #left {margin-right:-3px;}/* 3px jog*/
    * html #outer{/* 3px jog*/
    	margin-left:162px;
    	margin-right:162px;
    }
    p {margin-bottom:1em;padding:0 5px}
    
    #right {
            background:#fff url(corner-right.jpg) no-repeat right top;
    	position:relative;/*ie needs this to show float */
    	width:165px;
    	float:right;
    	margin-right:-164px;/*must be 1px less than width otherwise won't push footer down */
    	left:1px;
            top:-1px;
    }
    * html #right {margin-right:-165px;margin-left:-3px}/* stop float drop in ie + 3px jog */
    
    #footer {
    	width:100%;
    	clear:both;
    	line-height:50px;
    	border-top:1px solid #000;
    	background-color:#ffffcc;
    	color: #000000;
    	text-align:center;
    	position:relative;
    }
    #clearheader{height:72px;}/*needed to make room for header*/
    #centrecontent {float:right;width:99%;position:relative;}
    * html #centercontent{width:100%}
    
    .outerwrap {
    float: left;
    width: 99%;
    }
    .clearer{
    	height:1px;
    	overflow:hidden;
    	margin-top:-1px;
    	clear:both;
    }
    
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    body {width:expression( documentElement.clientWidth < 905 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 905 ? "905" : "auto") : 
    
    "905px") : "auto" );}
    #wrapper {width:expression( documentElement.clientWidth > 1200 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1200 ? "1200" : 
    
    "auto") : "1200px") : "auto" );}
    * html #outer, * html #wrapper,* html #centrecontent {height:1%}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="wrapper"> 
      <div id="outer"> 
        <div id="clearheader"></div>
        <div class="outerwrap"> 
          <div id="centrecontent"> 
            <h1>Min width of 800px and max width of 1200px</h1>
    
            <p>centre content goes here centre content goes here : centre content 
              goes here centre content goes here : centre content goes here centre 
              content goes here : centre content goes here centre content goes here 
              : centre content goes here centre content goes here : centre content 
              goes here centre content goes here : centre content goes here centre 
              content goes here : centre content goes here centre content goes here 
              : centre content goes here centre content goes here : centre content 
              goes here centre content goes here : centre content goes here centre 
              content goes here : centre content goes here centre content goes here 
              : centre content goes here centre content goes here : centre content 
              goes here centre content goes here : centre content goes here centre 
              content goes here : centre content goes here centre content goes here 
              : centre content goes here centre content goes here : centre content 
              goes here centre content goes here : centre content goes here centre 
              content goes here : centre content goes here content goes here : </p>
          </div>
          <div id="left"> 
            <p>Left content goes here : Left content goes here : Left content goes 
              here : Left content goes here : Left content goes here : Left content 
              goes goes here : Left content goes here : </p>
          </div>
          <div class="clearer"></div>
        </div>
        <!--end outer wrap -->
    
        <div id="right"> 
          <p>Start Right content goes here : Right content goes here : Right content 
            goes here : Right content goes here : Right content goes here : Right 
            content goes here : Right content goes here : Right content goes here 
            : Right content goes here : </p>
        </div>
        <div class="clearer"></div>
      </div>
      <div id="footer"><a href="3colfixedtest_4.htm">Back to main Demo</a></div>
      <div id="header">Header </div>
    </div>
    
    </body>
    </html>

  2. #2
    SitePoint Addict CWebguy's Avatar
    Join Date
    Mar 2009
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sidebars never extend all the way down unless you give them a set height

    Cheers

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,590
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    On "#wrapper" give background:#FFF; to appear equal height columns

    On ".outerwrap" make it 100&#37; width and add "margin-left:-1px;". This fixes the left border issue you would have seen.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Anyone know why?
    Yeah, you can get a good explanation of what is going on here.
    Equalizing Columns in CSS

    With CSS it is about giving columns an equal height appearance. There are at least four different ways of doing it with css only.

    1. Faux Columns (repeating BG image)
    2. Additional Divs & Negative Margins (imageless)
    3. The Border Trick
    4. Absolute Positioned Painting Divs

    I see you are using Pauls Min/Max 3-col, in his demo he is using a repeating BG image (faux column) on the #wrapper to paint the left column. You still have the image path on your wrapper styles but you have disabled it with the forward slashes.

    Remove the forward slashes from the background and border on the wrapper styles and then make yourself a repeating image and you will have a working layout.

    Hope that helps you understand what is going on!


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
  •