Two divs full and fixed width

Question

I am trying to make two divs in the main container side by side, with bottom div should adapt to the width of the rest of the space.

<div id="container">
    <div id="left">fixed width</div>
    <div id="right">rest of space width</div>
</div>

#container {
    float:left;
    width:100%;
}
#left, #right {
    padding:50px;
    background: #ccc;
    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
}

#right {
    padding:20px;
    background:#000;
    color:#fff;
}

I'm stuck at this stage http://jsfiddle.net/Z9qW3/7/

A similar question has already been asked: http://stackoverflow.com/questions/6487085/two-divs-one-fixed-width-the-other-the-rest?rq=1 — sekky, Sep 26 '13 at 08:27
I saw it, but if i make my right div to adapt rest of space, it isn't bottom position — Megadevice, Sep 26 '13 at 08:33
I answered a similar question yesterday: http://stackoverflow.com/questions/19003663/divs-arrangement-html-css/19004191#19004191 — Stephan Muller, Sep 26 '13 at 08:35
@Megadevice do you want your right div to take all the remaining space? i mean on the right side as well as on the bottom of left div? — Mandeep, Sep 26 '13 at 08:51
@user2675613, i want only stretch my right div to remaining space. — Megadevice, Sep 26 '13 at 09:05

score 1 · Answer 1 · answered Sep 26 '13 at 09:18

1

#container
{
   overflow-x:hidden
}
#left
{
width:20%;
float:left;
position:fixed;
border:1px solid red
}
#right
{
width:80%;
float:right;
position:absolute;
left:20%;
bottom:0;
border:1px solid red
}

answered Sep 26 '13 at 09:18

score 0 · Answer 2 · answered Sep 26 '13 at 08:33

0

Try This Code:

Demo

css

#left
{
width:20%;float:left;position:fixed;left:0px;
border:1px solid yellow;
}
#right
{
width:80%;float:right;
border:1px solid red;
}

html

<div id="container">
    <div id="left">fixed width</div>
    <div id="right">rest of space width</div>
</div>

answered Sep 26 '13 at 08:33

Sandip

372
1
7

and how to fix problem that my right div is still in top position? i need move my right div to bottom position. – Megadevice Sep 26 '13 at 08:43
@Megadevice check this [link](http://jsfiddle.net/A2she/2/) – Sandip Sep 26 '13 at 08:48
it's not excatly what i meant. look at my first post. i want only stretch my right div to rest of width and i can't do it because if i stretch my div it back to top position. – Megadevice Sep 26 '13 at 08:56

score 0 · Answer 3 · answered Sep 26 '13 at 09:37

0

Hope this would help...

#container {
    width: 100%;
}

#left {
    padding: 50px;
    background: #ccc;
    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
    float:left;
}

#right {
    padding-top: 20px;
    padding-bottom: 20px;    
    background:#000;
    color:#fff;
    width: 79%;
    float: right;    
}

answered Sep 26 '13 at 09:37

Mahib

3,977
5
53
62

Right div still returns to the top position – Megadevice Sep 26 '13 at 09:47

Mandeep · Answer 4 · 2013-09-26T09:09:11.250

-1

What i can get from your question is you want a fixed div on left side and the other div should take the remaining space on right and on the bottom of left div. I think a better approach would be to make a single big div and then float a fixed div on left and then you can use the remaining portion to position individual elements with css positioning property

edited Sep 26 '13 at 09:09

answered Sep 26 '13 at 09:02

Mandeep

9,093
2
26
36

Two divs full and fixed width

4 Answers4