CODEWITHSUNDEEP
csslayouthtml
lukeo05
lukeo05

Reputation: 1863

Fixed size div which sits to the right of a main div that fills up remainder of screen

I have seen lots of questions but none that seem to quite solve my problem.

I have two divs: mainbody and rightpanel. I would like the rightpanel to be a fixed size (210px), and to sit to the right of the mainbody div which fills up all the remaining space of the window.

So it would resize like this:

+----------------------------------------+
|                             |          |
|                             |          |
|                             |          |
|       mainbody              |rightpanel|
|                             |          |
|                             |          |
|                             |          |
+----------------------------------------+

+-------------------------------+
|                    |          |
|                    |          |
|                    |          |
|  mainbody          |rightpanel|
|                    |          |
|                    |          |
|                    |          |
+-------------------------------+

My current solution below sort of works, but if the window is resized to below about 900px the right bar gets pushed to the bottom as the 25% remaining space gets too small for it to fit into, so I force the window to horizontally scroll at this width.

#wrap {
    width:97%;
    margin:0 auto;
}

#mainbody {
    float:left;
    width: 75%;
    margin-right: 10px;
    margin-left: 10px;
}

#rightpanel  {
    float:right;
    width: 22%;
    min-width: 210px;
    max-width: 210px;
}

Upvotes: 0

Views: 1504

Answers (4)

whostolemyhat
whostolemyhat

Reputation: 3123

You need to put the right panel before the main content if you float it:

<div id="rightpanel">blah blah blah</div>
<div id="mainbody">blah blah blah
    blah blah blah
    blah blah blah
</div>

<style type="text/css">
    #rightpanel {
        width:210px;
        float:right;
        background-color:red;
    }
    #mainbody {
       margin-right:210px;
       background-color:blue;
    }
</style>

This will keep the right-hand panel aligned properly even if the page is resized.

Upvotes: 2

Dani-Br
Dani-Br

Reputation: 2457

look on my site : http://www.mcohenlawyer.com/
is it what you want ?

if yes, this is the CSS code :
(supported in all major browsers)

div.menubar {
    position: fixed; /*can be absolute too*/
    width: 158px;
    /*what comes latter is not relevant for your question*/
    /*......*/
}
.body { /*the main body*/
    position: absolute;
    right: 180px;/*can be 159px, if you don't want space between divs*/
    min-height: 870px;
    /*what comes latter is not relevant for your question*/
    /*......*/
}

Upvotes: 0

Thomas Davis
Thomas Davis

Reputation: 1896

This should work

<div id="container">
    <div id="left" style="background: #ff00ff; ">
        Left
        <div id="right" style="width: 210px; float: right; background: #ff0000;">
            Right
        </div>
    </div>
</div>

Upvotes: 1

benhowdle89
benhowdle89

Reputation: 37494

#mainbody {
float: left;
}
#rightpanel {
width: 210px;
}

Have you tried something like this?

Upvotes: 0

Related Questions