CODEWITHSUNDEEP
csshtml
Pacuraru Daniel
Pacuraru Daniel

Reputation: 1205

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 this parent div, 2 divs: 1st one needs to have a width or 250px and the 2nd one needs to have the rest of the screen's width. They both are missing the height.. depending how much content there will be inside it. Now i was trying to make it like this:

<div id="calendar">
        <section id="list">
        </section>

        <section id="grid">
        </section>
</div>

and the css like this:

#calendar {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
#calendar #list {
    background: #f00;
    position: absolute;
    width: 250px;
    left: 0;
    top: 0;
}
#calendar #grid {
    background: #0f0;
    position: absolute;
    left: 250px;
    top: 0;
    right: 0;
}

now the problem is, the parent div doesnt resize when i add content to the children divs

I hope there is a workaround with the CSS to solve this cause it would be bad to do it via JS.

Thank you in advance, Daniel!

Upvotes: 4

Views: 11974

Answers (3)

Paulo R.
Paulo R.

Reputation: 15609

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.

Upvotes: 1

Jayx
Jayx

Reputation: 3966

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

<div id="calendar">
        <section id="list">
        </section>

        <section id="grid">
        </section>
        <div class="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.

Upvotes: 0

Danny
Danny

Reputation: 468

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

Upvotes: 0

Related Questions