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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Difficulty getting columns to touch bottom of screen

    I am trying to create a layout similar to this:



    But the problem is the boxes will not extend to the bottom of the page even with height: 100% and no parent element that they could be inheriting a limited height from. I finally got the three columns to align properly with auto margins but I just don't know how to get these damned boxes to take up the full height of the screen.

    Thank you in advance, I could post code but there is little point as it is just 3 divs with no padding/borders/content/margins.
    Once I thought I was wrong but I was mistaken.

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Did you set the padding and margins of the body element to zero?
    Pepe, the bull

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yes. When I set the height: 100% value it simply does nothing at all to each box.

    The CSS file

    Code:
    body 
    {
    background-color: #666699;
    margin: 0px;
    padding: 0px;
    }
    
    #left
    {
    float: left;
    height: 100%;
    width: 100px;
    margin: 0px;
    padding: 0px;
    background-color: #333366;
    }
    
    #right
    {
    float: right;
    height: 100%;
    width: 100px;
    margin: 0px;
    padding: 0px;
    background-color: #333366;
    }
    
    #middle
    {
    margin: 0px auto 0px auto;
    padding: 0px;
    height: 100%;
    width: 600px;
    background-color: #333366;
    }


    The HTML File

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK href="welcome.css" rel="stylesheet" type="text/css">
    <title>Welcome to the Joggins Fossil Cliffs - Please Choose a Language
    </title>
    </head>
    <body>
    <div id="left">
    left
    </div>
    <div id="right">
    right
    </div>
    <div id="middle">
    Where does this go?
    </div>
    
    </body>
    </html>

    Now I know that this will leave space between the boxes and for now that is ok. I will probably instead use a single box with a div inside for the image for simplicity's sake but I am just messing around a bit.
    Once I thought I was wrong but I was mistaken.

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well, I solved my own problem. When using a full-height setting for a div element even if it has no particular parent it does not assume that 100% means 100% of the window. You need to specify in the body section of your css that height: 100%. Then the divs will inherit that and their 100% will equal 100% of the screen.
    Once I thought I was wrong but I was mistaken.

  • #5
    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
    You'll need to set the html to 100% height to in order to work in FF.
    Code:
    html, body {
    margin:0;
    padding:0;
    height:100%;
    }

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah, I found that out too but never bothered updating since nobody else seemed concerned with this thread.
    Once I thought I was wrong but I was mistaken.

  • #7
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    I was just kicking myself trying to figure it out for my page. Thank you.
    Pepe, the bull


  •  

    Posting Permissions

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