Question

I have two divs on a page with the same height position. I’m trying to make them expandable, allot like what goes on in the WordPress dashboard area:

Now i’ve got the left div to expand but only with the right div staying at the same width. I need both to expand on zooming in and out.

any ideas how this is done?

I’ve been looking it up for the past hour but i cant find anything.

A link to a tutorial would be cool (good luck finding one).

EDIT:

Here guys, i found something similar: http://jsfiddle.net/Khez/2zLPF/embedded/result/

do you see how the two divs side by side expand? the green and blue ones…

Answer 1

If you want your divs to dynamically change depending on the width of their container, set the widths using percentages:

HTML:

<div class="column">
    <div class="wrapper">
        <p>Text</p>
    </div>
</div>
<div class="column">
    <div class="wrapper">
        <p>Text</p>
    </div>
</div>

CSS:

.column {
    float: left;
    width: 50%; }
.column div { margin: 0 20px; /* Set the spacing between the cells */ }

Preview: http://jsfiddle.net/Wexcode/F7h2C/

NOTE: Because you are setting the combined widths of the columns to 100%, you cannot add padding to .column if you want them to be on the same line. The inner div wrapper will allow you to add spacing between your two columns. You should apply all background attributes to .wrapper.