Position Absolute But Resize Parent

i am trying to code an html with 2 divs inside a div. There is a parent div with no width or height.. the width is the browser width and the height is not specified. I want inside

Solution 1:

Here's my solution -> http://tinkerbin.com/Z8mJmItU

Float the #list with its given width, then give #grid the same margin-left.

Then to get both columns to look like they have 100% of the height of the parent-container you need an image. Before you'd have to use an 'actual image'. Today you can simply rely on css3 gradients for backgrounds making your page load faster (1 less http request for the image). It may seem more complicated, but it actually isn't 'that' complicated. It even ends up giving you more flexibility since you can change the width and color of the columns without needing to create a new image. All you need is to change the css.

Solution 2:

You need to specify a height if you are going to use absolute. Then it should work.

EDIT

use

position: relative;

on the child elements.

EDIT 2

Perhaps this post would help with what you are after? Div width 100% minus fixed amount of pixels

Solution 3:

Don't use positioning, use float ... with your current method the parent will collapse and the only way to determine the required height of the parent, would be to calculate the height of the highest child element (typically, with JavaScript).

<divid="calendar"><sectionid="list"></section><sectionid="grid"></section><divclass="clear"></div></div>

... and the CSS ...

#calendar {
    margin: 0 auto;
    position: relative;
}
#calendar#list {
    background: #f00;
    float:left;
    width: 250px;
}
#calendar#grid {
    background: #0f0;
    margin-left: 250px;
}
.clear{
    clear:both;
}

This way the #calendar will adjust in height to the tallest child element. Also remember to remove the overflow rule.

... the above for the sake of being brief, you should probably look at using clearfix (by adding a class to #calendar) - read more here.