100% Height and Width, CSS and Dynamic Content

Question

I've looked around and haven't found QUITE what I'm looking for yet, so hopefully this question hasn't already been answered somewhere else!

Anyways, the layout in question can be found HERE. What I am trying to achieve is a fixed width left column, and fluid width content area. For the most part, it works just fine. However, when content expands beyond the browser window's height or width, the sections don't seem to expand like I would want. Notice how to grey bar at the top doesn't reach the right of the page content, and the height of the left column doesn't reach the bottom of the page content either.

Am I right in thinking this stems from the fact that setting something to 100% height or 100% width via CSS is static? i.e. Whatever the height/width of the browser window was when the CSS was called is saved and that's that?

If that's the case, maybe I need to look into some other methods of setting the height and widths of my elements. Any ideas? Also, note that the dummy content in the page is an image for now. I wanted to blur out names, etc. to keep data private.

THANKS FOR ALL OF YOUR HELP!!!

score 1 · Accepted Answer · answered Apr 17 '11 at 23:14

How about something like this...

The left column will only go as far as the right content though. If you want it to expand to the height of the viewport when there's not enough content to fill you'll need some javascript or you'll have to use a repeating background that fills the html

Demo: http://jsfiddle.net/wdm954/KyUfN/

<div id="wrapper">
    <div id="left">left</div>
    <div id="right">       
        <div id="content">
        <div id="top">top</div>
            content
        </div>
    </div>
</div>

CSS...

/* clearfix */
#wrapper:after, #right:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
}

#wrapper, #right {
    display: inline-block;
}

#wrapper, #right {
    display: block;
    -height: 1px;
}
/* end clearfix */

#wrapper {
    background-color: #000000;
}

#left {
    float: left;
    width: 300px;
    color: #FFF;
}

#right {
    margin-left: 300px;
}

#top {
    height: 100px;
    background-color: #DEDEDE;
    border-bottom: 1px solid #B8B8B8;
}

#content {
    background-color: #F4EBEB;
    height: 600px;
    width: 1200px;
}

Sorry for the large delay, but thanks for the response. While I ended up changing my structure completely (thus eliminating the initial problem), your solution pointed me in the right direction. — Tom Winchester, Jun 28 '11 at 22:55

Julian K · Answer 2 · 2013-02-01T02:04:18.410

If the background is the main problem, you can just style the wrapper. This is what I ended up doing for an unruly sidebar, as I didn't want to resort to JS and other solutions didn't work for me. In my case, the issue with the sidebar came because of jQuery tabs, that are part of the theme. When I switched to the tabs, the sidebar wouldn't extend to the full height, so the background wouldn't either.

HTML

<div id="wrapper" class="sidebar-right">
    <div id="maincontent">
    #content
    </div>
    <div id="sidebar-right">
    #sidebar content
    </div>
</div>

CSS (this presumes 960 grid with 280px sidebar)

#wrapper.sidebar-right{
    background: white url('images/bg.png');
    background-repeat: repeat-y; /*repeats down the length of the page*/
    background-position: 680px 0px; /*moves it into place*/
    }

If you have different sidebars, or full-width layouts, change the background image/position and style accordingly. Hope that helps someone.

100% Height and Width, CSS and Dynamic Content

2 Answers2