CODEWITHSUNDEEP
htmlcss
makambi
makambi

Reputation: 779

Losing elements' positions with css

I need to do smth like this: enter image description here

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)

Upvotes: 1

Views: 230

Answers (4)

otinanai
otinanai

Reputation: 4025

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/

Upvotes: 1

Tim S.
Tim S.

Reputation: 13843

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

Upvotes: 1

Jude Duran
Jude Duran

Reputation: 2205

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?

Upvotes: 1

Kingk
Kingk

Reputation: 1021

Try this..

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

Upvotes: 0

Related Questions