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

Home Forums CSS 100% height

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #26196

    Hi there

    I have been trying to set my left-sidebar and right-widgets to 100%, exactly like this:

    At the moment, my site looks like this:


    I tried to use height; auto, 100%, and the inherit, but still no luck.

    My html code is:


    My CSS:

    #page-wrap {width: 1024px; height: auto !important; height: auto; margin: 0px auto -317px;}
    #push {height: 317px;}
    #page-wrap #container {height: 100%; width: 1004px; margin-top: 16px; background-image: url(images/bg-repeat-content.png); background-repeat: repeat; background-position: left top; padding: 10px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFF; float: left;}

    /* SIDEBAR LEFT */
    #page-wrap #container #cont-left #sidebar
    {background-image: url(images/bg-repeat-left-right.png); background-repeat: repeat; background-position: left top; float: left; height: 100%; width: 200px; font-size: 120%;}

    /* CONTENT */
    #page-wrap #container #cont-left #content
    {background-color: #FFF; float: right; width: 484px; text-align: left; padding-bottom: 50px; height: 100%;}

    #page-wrap #container #cont-right
    {float: right; width: 280px; height: 100%; text-align: left; margin-left: 10px; background-image: url(images/bg-repeat-left-right.png); background-repeat: repeat; background-position: left top; padding-right: 10px; padding-left: 10px; vertical-align: top; padding-bottom: 30px;}

    I know this is a big job, but would really appreciate anyone’s help on this one. Let me know if there is anything else that I may provide you with.

    Many thanks in advance
    CHEERS :)


    may be you need Faux Columns.

    Chris Coyier

    I would suggest Faux Columns as well (using a repeating background graphic to visually simulate equal height columns) if your design works with it.


    Hey guys

    I need to learn how to use this faux columns.

    Hey Chris! I downloaded one of your example ‘Super Simple Two Column’ but still having problems with my site. I will keep trying until it works ;)


    Hey guys,

    No luck, and I’ve really tried my hardest. This is not looking good, too many hours wasted and need to solved this ASAP. If I can’t fix this, then my only option is to leave it as it is :lol: :cry: .

    Unless, someone is kind enough to help me?

    Thanks heaps, you are too kind for your time ;)


    This example might help you.. just have a look at page source: … ple-7.html

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.