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 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100% height! yay!

    i've been trying back and forth on this page for hours
    ( http://sheets.rowik.net/ )

    you see i want two columns, one footer, one header. the thing is the columns aren't full height...

    the footer is already using the wrap's position:relative to be at wrap's very bottom, and not at viewport's bottom. I tried putting another pos:rel. in #middle (middle=two columns) and bottom:0 out the columns, but the columns actually went up instead of down.

    how do you extend these two columns to the bottom? i went to see many online examples, but they usually don't really extend the middle part to the bottom.
    Last edited by jo9100; 11-09-2008 at 05:03 AM.

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by jo9100 View Post
    i've been trying back and forth on this page for hours
    ( http://sheets.rowik.net/ )

    you see i want two columns, one footer, one header. the thing is the columns aren't full height...

    the footer is already using the wrap's position:relative to be at wrap's very bottom, and not at viewport's bottom. I tried putting another pos:rel. in #middle (middle=two columns) and bottom:0 out the columns, but the columns actually went up instead of down.

    how do you extend these two columns to the bottom? i went to see many online examples, but they usually don't really extend the middle part to the bottom.
    Have you tried

    Code:
    height: 100%;
    OR

    Put your footer as

    Code:
    height: 10%;
    and your colums at

    Code:
    height: 90%;

  • #3
    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
    Have a look at http://bonrouge.com/2c-hf-fluid.php.
    (You may have to adopt some faux column method also.)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Have a look at http://bonrouge.com/2c-hf-fluid.php.
    (You may have to adopt some faux column method also.)
    isn't there any more natural way of doing it? i am trying to avoid images as best as i can...

  • #5
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by jo9100 View Post
    isn't there any more natural way of doing it? i am trying to avoid images as best as i can...
    None of those methods use images. Fluid layout and Faux columns don't need images, just pure CSS.

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Millenia View Post
    None of those methods use images. Fluid layout and Faux columns don't need images, just pure CSS.
    actually, if you check well, the fluid layout uses an image to imitate a longer column while the sidebar is in fact much shorter:

    Code:
    #wrap {
    background:transparent url(bg200.gif) repeat-y scroll left top;
    margin:auto;
    min-height:100%;
    position:relative;
    }

    the faux column also uses an image, and i quote
    The embarassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns.

  • #7
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #8
    New Coder
    Join Date
    Dec 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the content div in the first is in fact much shorter than they look like. with columns it all becomes screwed up...

    and for the second, theres just no header or footer so theres no problem at all

    anyway, thanks for trying to help

  • #9
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    do the margin-bottom: -2000px; padding-bottom: 2000px; hack?
    overflow of main div has to be none though

    really fast non-working example...
    Code:
    <div container overflow:none; bg#000;>
            <div right float:right; margin-bottom: -2000px; padding-bottom:2000px; width: 190px; bg:#fff>
            sidebar
            </div>
    <div left margin-right:200px; float: left;>content</div>
    
    <div>
    Last edited by twodayslate; 11-10-2008 at 02:19 AM.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!


  •  

    Posting Permissions

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