Losing elements' positions with css - html

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; }

Answer 2

Using table is much easier.
HTML
<div class="page-wrapper">
<div class="search-wrapper">
</div>
<table class="content-wrapper">
<tr>
<td class="leftPage">LEFT</td>
<td class="rightPage">RIGHT</td>
</tr>
</table>
</div>
CSS
table
{
width:100%;
}
.leftPage
{
width: 454px;
}
Unless you really want to stick with DIVs?

Answer 3

Try using absolute position at a relative container and have your right div position at left the same amount of pixels as your left width. Like below:
div.content-wrapper {
height: 100%;
width: 100%;
position:relative;
}
div.leftPage {
background-color: black;
height: 100%;
width: 454px;
position:absolute;
}
div.rightPage {
background-color: red;
height: 100%;
width: 100%;
position:absolute;
left:454px;
}
Also its good to set the body height at 100% if you want your divs to expand across the page:
body, html {
width:100%;
height:100%;
}
And here's the demo: http://jsfiddle.net/XLLSA/1/
EDIT
I fixed the search div: http://jsfiddle.net/XLLSA/2/

Answer 4

Try this..
div.left {
width: 20%;
min-width: 200px;
}
div.right {
width: 80%;
}