Forums

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
    Posts
  • September 21, 2009 at 6:41 am #26196
    buckmajor
    Member

    Hi there

    I have been trying to set my left-sidebar and right-widgets to 100%, exactly like this:
    [img]http://i144.photobucket.com/albums/r192/Big-Major_2007/screenShot-fullsize.jpg[/img]

    At the moment, my site looks like this:

    [img]http://i144.photobucket.com/albums/r192/Big-Major_2007/screenShot.jpg[/img]

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

    My html code is:

    Code:

    My CSS:

    Code:
    /*
    STRUCTURE
    */
    #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%;}

    /* SIDEBAR-WIDGETS */
    #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 :)

    September 21, 2009 at 7:57 am #64505
    sitorus
    Member

    may be you need Faux Columns. http://www.alistapart.com/articles/fauxcolumns/

    September 21, 2009 at 8:45 am #64506
    Chris Coyier
    Keymaster

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

    September 21, 2009 at 9:37 am #64508
    buckmajor
    Member

    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 ;)

    September 22, 2009 at 9:47 am #64556
    buckmajor
    Member

    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 ;)

    October 14, 2009 at 3:16 am #65454
    dunlop9
    Member

    This example might help you.. just have a look at page source: http://www.ejeliot.com/samples/equal-he … ple-7.html

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