Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    49
    Thanked 1 Time in 1 Post

    make a sidebar div extend down to the bottom of its parent

    Hi. On this website, I'd like the #left sidebar to extend down to the bottom of #container.

    I gave #left CSS of display: table-cell; but this has not worked yet.

    How do I extend #left down to the bottom of #container?

    Thanks.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Check the proper usage of display:table-cell; at http://css-tricks.com/examples/Fluid...g-neiner-three (you may inspect using firebug to see the CSS)

    Or the second answer at http://stackoverflow.com/questions/1...ht-css-problem
    Last edited by abduraooft; 07-26-2013 at 11:53 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    49
    Thanked 1 Time in 1 Post
    I am using the same CSS as the first link, and the 2nd link's answer does not use display:table-cell.

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    45
    Thanks
    0
    Thanked 3 Times in 3 Posts
    This what you're talking about?

    Code:
    <style type="text/css">
    
    .content {
    	overflow: hidden;
    	position: relative;
    	width: 100%;
    }
    
    .floatLeft {
    	float: left;
    }
    
    .columnone, .columnthree {
    	width: 33%
    }
    
    .columntwo {
    	background: none repeat scroll 0 0 #333;
    	float: right;
    	height: 100%;
    	position: absolute;
    	right: 33%;
    	width: 34%;
    }
    
    
    .columnone {
    	background: #666;
    }
    
    .columnthree {
    	background: none repeat scroll 0 0 #999;
    	float: right;
    	height: 100%;
    	position: absolute;
    	right: 0;
    }
    
    </style>
    Code:
    <div class="content">
    
    <div class="columnone floatLeft">
    This is some content. This is some content. This is some content. This is some content. This is some content. This is some content.  
    </div>
       
    <div class="columntwo floatLeft">
    This is some content.
    </div>
    
    <div class="columnthree floatLeft">
    This is some content. This is some content.
    </div>
    
    </div>

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The second answer in that second link is has the following code
    Code:
    <DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #wrap {
    background: orange;
    display: table;
    height: 88%;
    width: 550px;
    padding: 11px;
    }
    #col1 {
    display:table-cell;
    background: #808080;
    width: 222px;
    border: 1px solid #FFF;
    padding: 12px;
    }
    #col2 {
    display:table-cell;
    background: #808080;
    width: 111px;
    border: 1px solid #FFF;
    padding: 12px;
    }
    </style>
    </head>
    <body>
    <!-- this container will determine the height of both columns --> 
    <div id="wrap">
    
    <div id="col1">
    <p>Lorem ipsum something or other.</p>
    </div>
    
    <div id="col2">
    <p>More Lorem than ipsum.</p>
    </div>
    
    </div>
    <!-- end container -->
    </body>
    </html>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    49
    Thanked 1 Time in 1 Post
    I can see the difference that the second answer in that second link has is that the parent container contains CSS display: table;

    I added this to #container, but #left is still not reaching the bottom of #container.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    When I remove - the two divs which are the immediate children of the container and are not the part of the columns (the clearing <div> & footer) - and the two unnecessary floats applied to the two columns - I get the left column extended to the full height.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    49
    Thanked 1 Time in 1 Post
    Thanks abduraooft

    Now the CSS to limit the width of large images (see 1200px wide image) fails.

    The table cell will stretch to accommodate the image. How do I stop this stretch?


  •  

    Tags for this Thread

    Posting Permissions

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