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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS Background fill

    I am trying to make the conversion from tables where things were so much easier, to using only divs and css.

    I am having trouble getting the left div (navigation) to expand vertically as the right div (content) expands. Basically I want the yellow background to be the same height as the blue background, But I don't know the length of the content background because that is going to change on every page.

    Using tables the cell expanded automatically as the content grew.

    Can anyone help me with this? It seems like an easy and common thing to do, but I am at a loss.

    Any help is greatly appreciated!

    PHP 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" lang="en" xml:lang="en">

    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title></title>

    <
    style>
    <!--
    body {
        
    margin5px;
        
    padding0px;
        
    font-familyarialsans serif;
        
    font-size12px;
    }

    #page-wrapper {
        
    width100%;
        
    heightauto;
        
    border0px solid black;
    }

    #nav {
        
    margin0px 0px 0px 0px;
        
    padding5px;
        
    floatleft;
        
    width150px;
        
    backgroundyellow;
    }

    #content {
        
    margin0px 0px 0px 5px;
        
    padding5px;
        
    floatleft;
        
    width240px;
        
    backgroundblue;
    }
    -->
    </
    style>
    </
    head>

    <
    body>

    <
    div id="page-wrapper">
        <
    div id="nav">NAVIGATION</div>
        
        <
    div id="content">
        
    CONTENT<br />
        
    CONTENT<br />
        
    CONTENT<br />
        
    CONTENT<br />
          
    CONTENT</div>
    </
    div>

    </
    div>

    </
    body>
    </
    html

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its common but takes more work. Read this article http://www.alistapart.com/articles/fauxcolumns
    CSS lacks the ease of making equal columns but faking it works wonders. You could always use JS but kind of defeats the purpose.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're kidding? This is the only way to do this? Using a background image to give the appearance of 2 columns the same height?

    Is this really the only way?

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    You can do it the way shown below. However, you must use an image to get the desired effect, and the content (i.e., navigation, sidebar) must be of a defined width. It's one of the current problems with page divisions for layout; you can't achieve the dynamically expanding columns paradigm without "cheating", so to speak. Table layouts, background-image illusions, and JavaScript are the easiest ways to do this.


    <div id="backgroundLeft" style="background: #000 top left repeat-y;">
    <div id="backgroundRight" style="background: #000 top right repeat-y;">
    <div id="container"></div></div></div>

    There's also JavaScript to dynamically make the columns of equal height, however those without Java enabled will not see the effect.
    Last edited by Arbitrator; 05-05-2006 at 01:24 AM.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    If your wrapper is only to contain the two floated divs, you can just make the wrapper div overflow:auto; and give it the same background color as the nav div. This will look the same as what you want without the faux columns.


  •  

    Posting Permissions

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