Problems to set the ‘height: 100%’ property

  • Hello and thanks in advance for your help.

    I’m about to finish the template design of my new weblog and I’m struggling very badly to get to make the height of my left hand side column 100%. As far as I know the property ‘height: 100%;’ should work when all the parent layers have the property set to 100% too, including the html and the body.

    However you can have a look at the site ( https://www.southbites.com ) and you’ll notice than the left hand side column doesn’t reach the very bottom part of the page.

    I’m driving myself crazy trying to fix this problem but I can’t see where the error is. Could please anyone help me or give me a hint about this?

    Thanks so much

Viewing 5 replies - 1 through 5 (of 5 total)

  • Creating liquid faux columns
    This article may help you.

    Thread Starter nanuf

    (@nanuf)

    Thank you for your link. This is a nice article with a pretty interesting solution that unfortunately I can?′t apply to my case because my left hand side column is a div layer that itself is located within the general layer for the left hand side column. If I?′d apply that solution, I?′d have a background all from the top to the bottom and that?′s not the desired effect.

    Thank you anyway for your help.

    Anyone else can help me with this?

    Well, you can adapt the CSS from the article to use in your design. It need not be a verbatim copy/paste from one to the other.

    Thread Starter nanuf

    (@nanuf)

    For some strange reason it doesn’t work because my overall layout container layer doesn’t go all the way to the bottom despite its height property is set to 100%.

    My basic layers structure is the following one:

    <div class=”layout”>

    <div class=”header”></div>

    <div class=”container”>
    <div class=”column01″></div>
    <div class=”column02″></div>
    <div class=”column03″></div>
    </div>

    I’ve added a gray background color to the layout layer to illustrate what my problem is: https://www.southbites.com

    Here is the layer style:

    .layout {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    text-align: left;
    background: gray;
    }

    The same thing happens if I add the bg color to the container layer (the one acting as overall layer for the columns).

    Does this make sense at all? Any more ideas please?

    Thanks a lot

    Thread Starter nanuf

    (@nanuf)

    Sorry, I forgot to close the “layout” layer in the example above. But I’ve got it closed in my weblog code ??

    <div class=”layout”>

    <div class=”header”></div>

    <div class=”container”>
    <div class=”column01″></div>
    <div class=”column02″></div>
    <div class=”column03″></div>
    </div>

    </div>

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Problems to set the ‘height: 100%’ property’ is closed to new replies.