How To Precisely Layout Div In Html

I am stuck trying to precisely layout an element in my page. I hope someone can help me out. Please review http://jsfiddle.net/malaikuangren/5ssqP/2/show/. Thanks. My Confused Que

Solution 1:

Do not use Javascript to resize these elements. Prefer to use CSS directly. This will allow you to write cleaner code which is easier to edit and performs better. In the particular case, you don't need to manually calculate the height using Javascript. Instead, utilize CSS positioning to achieve your desired results.

Specifically, set your main content div to take up all the page in height, excluding the footer and header as follows:

#content {
    position: fixed;
    bottom: 40px;
    top: 100px;
}

Then adjust the contents of that div to take up as much space as you'd like them to on-the-fly. For example, you want your sidebar-holder to take up the whole height of the #content div. Therefore, the following CSS code suffices:

#sidebar-holder {
    position: absolute;
    top: 0;
    bottom: 0;
}

Similarly, your "splitter" div can be positioned using CSS positioning, but it's better implemented using a CSS border:

#sidebar-holder {
    border-right: 5px solid black;
}

To avoid extensive and unmanageable absolute positioning, use the directive position: relative in your parent elements and position:absolute within your child elements. This technique allows you to position child elements in absolute coordinates within a box defined by their closest relative parent. Therefore, the coordinates (0, 0) correspond to the top-left corner of the parent box.

I've reproduced in your code the full behavior that you desire using CSS only and it fixes your problems directly, without messy pixel value calculations. In addition, replacing Javascript with CSS makes it behave correctly when resizing the page and does not require rerunning your jQuery code on resize events.

Solution 2:

You don't have enough content to fill the gap between the footer and your content. If you look at the page when you don't have the screen maximized, there isn't a gap. There's plenty of ways to fix it. I would increase the height of the footer or increase the min-height of your content. Really, it's up to you.