Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Height 100% Problem

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #28205
    Radiant
    Member

    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:



    Error 2.

    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%;
    }

    #71771
    arjunvasudeva
    Participant

    for quick simpleness i just use:

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

    and

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

    #71773
    Radiant
    Member

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

    #71783
    TheDoc
    Member
    "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").

    #71784
    arjunvasudeva
    Participant

    oh yeah :D

    But who actually likes IE6?

    #71821
    Radiant
    Member

    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 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.