Grow your CSS skills. Land your dream job.

CSS Height 100% Problem

  • # February 28, 2010 at 2:52 pm

    I’ve been looking across the web for hours for a solution, I only have a few hours of experience with XHTML/CSS so the solution might be very simple but I haven’t found it yet.

    The problem is the following ( I don’t have a place to host this, sorry. ), I am trying to get my content boxes to stretch throughout the length of the whole page, this is the code I use (you might see an overdose of code in areas because I was trying out multiple solutions, none of them worked. ).

    Thanks in advance for helping me.

    HTML Document:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    This is where the blog posts go and the main content.



    CSS Stylesheet

    Code:
    /*CSS Document
    v1.0 | 20080212*/
    HTML, BODY, DIV, SPAN, APPLET, OBJECT, IFRAME, H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE, A, ABBR, ACRONYM, ADDRESS, BIG, CITE, CODE, DEL, DFN, EM, FONT, IMG, INS, KBD, Q, S, SAMP, SMALL, STRIKE, STRONG, SUB, SUP, TT, VAR, B, U, I, CENTER, DL, DT, DD, OL, UL, LI, FIELDSET, FORM, LABEL, LEGEND, TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD
    {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    BODY
    {
    line-height: 1;
    }
    OL, UL
    {
    list-style: none;
    }
    BLOCKQUOTE, Q
    {
    quotes: none;
    }
    BLOCKQUOTE:before, BLOCKQUOTE:after, Q:before, Q:after
    {
    content: ”;
    content: none;
    }
    /*remember to define focus styles!*/
    :focus
    {
    outline: 0;
    }
    /*remember to highlight inserts somehow!*/
    INS
    {
    text-decoration: none;
    }
    DEL
    {
    text-decoration: line-through;
    }
    /*tables still need ‘cellspacing=”0″‘ in the markup*/
    TABLE
    {
    border-collapse: collapse;
    border-spacing: 0;
    }
    /*END OF RESET

    LAYOUT
    */
    HTML
    {
    height: 100%;
    }
    BODY
    {
    min-height: 100%;
    height: 100%;
    background-color: #CCC;
    }
    #page-wrap
    {
    width: 960px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px auto -250px;
    padding: 150px;
    position: relative;
    }
    /*
    BOXES
    */
    #main-content
    {
    width: 600px;
    background-color: #333;
    float: left;
    height: 100%;
    height: auto !important;
    min-height: 50%;
    }
    #navigation
    {
    width: 250px;
    margin-top: 100px;
    background-color: #09F;
    float: left;
    height: 100%;
    height: auto !important;
    min-height: 100%;
    }

    # February 28, 2010 at 5:31 pm

    for quick simpleness i just use:

    min-width: 800px;
    max-width: 2000px;

    and

    min-height: 600px;
    max-height: 1200px;

    # February 28, 2010 at 6:22 pm

    But what if I want the div to fill the whole area under it, just like this site pretty much has on the right?

    # February 28, 2010 at 8:39 pm
    "arjunvasudeva" wrote:
    for quick simpleness i just use:

    min-width: 800px;
    max-width: 2000px;

    and

    min-height: 600px;
    max-height: 1200px;

    IE has trouble with these commands (specifically, IE6 does not except "min").

    # February 28, 2010 at 8:53 pm

    oh yeah :D

    But who actually likes IE6?

    # March 1, 2010 at 1:20 pm

    Everybody hates it, unfortunately many people have to suffer it. Those who surf the web at work from their corporate office sometimes don’t have anything else. That aside, did Radiant find the solution he needed?

    # March 1, 2010 at 4:08 pm

    No I haven’t, but I haven’t really seen any websites that have 100% height working either, they all use faux columns I suppose? And so does this site?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".