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!

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