Losing Elements' Positions With Css

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 too

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

Solution 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?

Solution 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/

Solution 4:

Try this..

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