position absolute but resize parent

Question

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!

Do you need to use `position: absolute`? You can just use `position: static` and `float` to achieve this and the parent will keep its height — My Head Hurts, Jun 28 '12 at 11:27
i tried your example and i will have a problem further because the 2nd div does not have a width size .. so if i add a div inside and set it to 100% of the parent, it will go under the 1st div aswell — Pacuraru Daniel, Jun 28 '12 at 11:41

score 1 · Accepted Answer · answered Jun 28 '12 at 12:01

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.

with your idea and some little changes i've made what i wanted to achieve :D i used the relative position on children divs and used margin-left: 250px; instead left: 250px and it works like a charm .. Thank you very much for the help JOPLOmacedo and thank you everybody in the topic! — Pacuraru Daniel, Jun 28 '12 at 12:12

score 0 · Answer 2 · edited May 23 '17 at 10:09

0

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

edited May 23 '17 at 10:09

Community

1
1

answered Jun 28 '12 at 11:23

Danny

468
2
7

i added a height right now to them and the parent div is still 0 px height – Pacuraru Daniel Jun 28 '12 at 11:26
i just did and the content dissapears – Pacuraru Daniel Jun 28 '12 at 11:28
Do you need them to be absolute? Relative would be easier to make the parent div stretch. – Danny Jun 28 '12 at 11:29
no i dont if you have any suggestions im open to them .. i just want the child divs to be 1 of them 250px width and the other rest of the screen width and to have different hegiht depending how much info i andd in them .. and the parent div to have the height of the biggest one of them – Pacuraru Daniel Jun 28 '12 at 11:34

score 0 · Answer 3 · answered Jun 28 '12 at 11:46

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.

position absolute but resize parent

3 Answers3

Linked