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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    3 divs semi fluid

    So here we go:

    I have 3 divs. center, mid, and bottom. center will be the only one with height info passed to it, but needs to stay centered vertically between the other 2....

    if the height was never to change, I could just say height is 33% for all 3, but it will change.. anyideas?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Not sure about your requirement. It'd be more clear if you post your current code and explain on the basis of that.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    well I don't really have any code, except 3 divs and classes assigned to them...


    just think of it like a 3 column fluid layout... but horizontal instead of vertical. top and bottom need to scale but the center one will be a fixed height (which will be hardcoded in via php)

    Code:
    <div class="top"></div>
    <div class="center" style="height: <?php $height; ?>">content</div>
    <div class="bottom"></div>
    im just not sure how to make the other two fill the rest of the page based on the center height

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    How about the following?
    Code:
    #left{
    float:left;
    width:33&#37;;
    }
    #right{
    float:right;
    width:33%;
    }
    #middle{
    margin:0 33%;
    }
    Code:
    <div id="container">
        <div id="left">A  </div>
        <div id="left">C  </div>
        <div id="middle">A  </div>
    </div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    except that thats 3 columns... not 3 rows. and what if the middle content height takes up more than 33&#37; of the page?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    except that thats 3 columns... not 3 rows.
    what? The above code is supposed to display 3 columns.
    and what if the middle content height takes up more than 33&#37; of the page?
    You could set the required width by the
    style="height: <?php $height; ?>"
    , but if it's in % or em, then the dimension will depend upon the height of #container div
    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
    •