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 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Problem with expandable Div tag

    (solved) - added min-height: to the container div and content div. Allowed both to start off at the min height and extend past it.


    Hi there. I was wondering if anyone can give me some advice or help me understand how to make this coding work.

    I have a left nav section, a content section and a right nav section all aligned at the top. Behind that I have the containing div tag for all those elements.

    What I want is the background div to expand, but this will only happen if there is content in the content section.

    Is there a way to make the content section a certain height, but also have it expand? Im having a bit of trouble understanding this concept, because if you set the element to a specific site, how can you make it flexible with overflow?

    Here's my code incase anyones curious.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    
    body {
    background-color:#000000;
    }
    
    
    div.container {
    
    width:800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    background-color:white;
    }
    
    div.banner {
    width:600px;
    height:30px;
    margin: 0 auto;
    background-color:green;
    margin-bottom:10px;
    
    border:1px solid green; 
    }
    
    div.leftnav {
    width:100px;
    margin-right:10px;
    float:left;
    
    border:1px solid red;
    }
    
    
    div.content {
    border:1px solid red;
    overflow:auto;
    
    }
    
    
    div.rightnav {
    width:100px;
    float:right;
    border:1px solid red;
    margin-left:10px;
    }
    </style>
    
    </head>
    <body>
    
    <div class="container">
    
    
    <div class="banner">
    
        </div>
    
    
    <div class="leftnav">
    
    <ul><li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    </ul>
    
        </div>
    
    <div class="rightnav">
    Test Text
        </div>
    <div class="content">
    <ul><li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    </ul>
     </div>
    </div>
    
    
    
    </body>
    </html>

    Thanks for reading
    Last edited by Zeke2; 10-31-2010 at 11:16 PM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,042
    Thanks
    15
    Thanked 240 Times in 240 Posts
    There's quite a simple way to do this, if it fits into your page scheme. You make a tall skinny div the minimum height of your page and float it all the way right or left, or place it where convenient.

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Went through a little bit of stuff but it works with just the min-height set for the container and the content section. In my case I didn't need the extra float tag added into the content section or another expandable div to be added. Thanks for the solution Here's my code incase anyones interested.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    
    body {
    background-color:black;
    }
    
    
    div.container {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    background-color:white;
    min-height:600px;
    }
    
    
    div.banner {
    width:600px;
    height:30px;
    margin: 0 auto;
    background-color:green;
    margin-bottom:10px;
    border:1px solid green; 
    }
    
    
    div.leftnav {
    width:100px;
    margin-right:10px;
    float:left;
    border:1px solid red;
    }
    
    
    div.content {
    border:1px solid red;
    overflow:auto;
    min-height:600px;
    }
    
    
    div.rightnav {
    width:100px;
    float:right;
    border:1px solid red;
    margin-left:10px;
    }
    
    
    </style>
    
    </head>
    <body>
    
    <div class="container">
    
    
    <div class="banner">
    
         </div>
    
    
    <div class="leftnav">
    
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    
        </div>
    
    <div class="rightnav">
    Test Text
         </div>
    <div class="content">
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul> </div>
    </div>
    
    
    
    </body>
    </html>
    Last edited by Zeke2; 10-31-2010 at 12:17 PM.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,042
    Thanks
    15
    Thanked 240 Times in 240 Posts
    I'm aware of the min-height and min-width attributes but they aren't supported in all browsers, i.e. IE 6.

  • Users who have thanked DrDOS for this post:

    Zeke2 (11-01-2010)

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    I'm aware of the min-height and min-width attributes but they aren't supported in all browsers, i.e. IE 6.
    damn.

    Ok so instead of setting a min height for content/container div, I should create a seperate skinny float with a
    Code:
    height:Xpx
    which will cause the container div to expand to the skinny divs height.

    So I suppose for the content div I should use the same principle but in this case create a tall skinny float inside the content div?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    html,body{
    height:100%;
    }
    div.container {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    background-color:white;
    min-height:100%;
    height:auto !important; /* for IE6*/
    height:100%;
    }
    div.content {
    border:1px solid red;
    overflow:auto;
    /*min-height:600px;*/
    }
    Or take a look at afaux column layout, at http://bonrouge.com/3c-hf-fixed.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Zeke2 (11-01-2010)

  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Try
    Code:
    html,body{
    height:100%;
    }
    div.container {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    background-color:white;
    min-height:100%;
    height:auto !important; /* for IE6*/
    height:100%;
    }
    div.content {
    border:1px solid red;
    overflow:auto;
    /*min-height:600px;*/
    }
    Or take a look at afaux column layout, at http://bonrouge.com/3c-hf-fixed.php
    Oh nice, so there still is a command for IE6, it's just with different expression.

    so height:auto;height:100% = min-height:100%?

    Ill check those links out Thanks for the info

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    so height:auto;height:100% = min-height:100%?
    Not really. All browsers except IE6 recognise min-height. Fortunately, IE6 considers height as the same as that of min-height in other browsers. The !important keywords tells all the browsers (except IE6) to take auto as final value and don't override it with any subsequent changes. Thus the last line height:100% is targeted for IE6 only.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Zeke2 (11-02-2010)

  • #9
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Cheers for the info.

    Im having some trouble though with implimenting a repeating background.
    Basically I have a float on the left of a standard div. I want the float to expand vertically with the repeating gradient to the height of browser.
    Im not sure what I'm doing wrong.


    Code:
    float:left;
    background-image:url('images/gradient.jpg');
    background-repeat:repeat-y;
    width:129px;
    min-height:937px;
    height:auto !important;
    height:100%;
    position:relative;
    left:-5px;
    top:-9px;

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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