Question

I need to do smth like this:

Left box should have static width and right one resizes to full browser width.
Height of the boxes also should be resizeable.

P.S.
Sorry guys, it took a while to make fiddle work.

So it is here

<div class="page-wrapper">
    <div class="search-wrapper">
    </div>
    <div class="content-wrapper">
        <div class="leftPage">
        </div>
        <div class="rightPage">
        </div>
    </div>
</div>

The problem is:

I have silver left page. I want it to have static width. Lets say 454px.
And I want right page (black one) to be dynamically resized to screen.

Variant with width 20%/80% is not good for me.
Is it possible with CSS only?
I got good answers with jquery/js but still interesting if it can be done with CSS only)

Sorry for troubles)

Answer 1

Javascript/jQuery

If you want left column to be static and the right column to be dynamic, you will need Javascript or a CSS preprocessor like SASS. That’s the only real solution that is supported by older browsers.

// parent width - leftpage width = remainings
$('div.rightPage').width(
    $('div.rightPage').parent().width() - $('div.leftPage').width()
);

Fluid layout

If you really want a pure-CSS solution, I suggest to use a fluid layout instead. This is cross-browser as well.

div.leftPage { width: 25%; }
div.rightPage { width: 75%; }

Simulated table

As alternative, you can still simulate a table layout using display: table. Tables do have that functionality. Check out the demo (resize the window to see it working)

This may not work in IE6 and IE7.

Native table

In the end, if you are OK with tables, you can use native tables, which are cross-browser 😉

CSS

table td.fixed { width: 200px; }

HTML

<table>
    <tbody>
        <tr>
            <td class="fixed">
                <p>Left content</p>
            </td><td>
                <p>Right content</p>
            </td>
        </tr>
    </tbody>
</table>

---

Finally, in order to resize it vertically, you need to set resize: vertical.

div.leftpage, div.rightpage { resize: vertical; }