Make the div take remaining space left after sidebar

Question

I am trying to create a very common layout here with a sidebar and the content section on the right. The width of my sidebar section is fixed (here 120px) and I want the container on the right side to take up the remaining space of the page (with a margin of 60px the right end).

Here's how the markup looks like:

<body>
    <div class="wrapper">
        <div class="content">
            <div class="left-sidebar">
                <ul class="sidebar-menu">
                    <li>Item 1</li>
                    <li>Item 2</li>
                </ul>
            </div>
           <div class="right-main-content">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
           </div>
        </div>
    </div>
</body>

Here's the fiddle of the above as well: http://jsfiddle.net/6nLtp/

In my case, what's happening is that the right container is going below the sidebar and taking 100% width. However, I expected it to take just the remaining space towards the right of the sidebar (and with a margin of 60px on the right of the page). The container comes along with the sidebar when I specify the width, but I am not sure why do I need to do that? Since the div elements (sidebar and the right container are floated), why can't the right content just stick along with the sidebar?

checkout http://stackoverflow.com/questions/580195/css-layout-2-column-fixed-fluid, specifically the jsFiddle it links to : http://jsfiddle.net/uEj55/1/ — stefancarlton, Dec 13 '13 at 06:20
possible duplicate of [CSS two divs next to each other](http://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other) — jstricker, Dec 13 '13 at 06:29

score 0 · Answer 1 · answered Dec 13 '13 at 06:19

I dunno if it's good code, but its working for me

.wrapper {width:100%;height:100%;}
.left-sidebar {width:120px;height:200px;margin:20px 0 0 0;border:1px solid red; float:left;}
.right-main-content{margin:20px 60px 0 140px; display:block;padding-top:5px; }
.right-main-content p {border: 1px solid green;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

score 0 · Answer 2 · answered Dec 13 '13 at 06:19

Try this

CSS

.wrapper {width:100%;height:100%;display:inline-block;}
.left-sidebar {max-width:120px;width:20%;height:200px;margin:20px 0 0 0;border:1px solid red;float:left;}
.right-main-content{margin:20px 60px 0 0;width:80%;border: 1px solid green;float:right;}

DEM0

score 0 · Answer 3 · answered Dec 13 '13 at 06:22

Try this...Updated Link

.wrapper {width:100%;height:100%;}
.content{position:relative;}
.left-sidebar {width:120px;height:200px;margin:20px 0 0 0;border:1px solid red; position:absolute; }
.right-main-content{margin:20px 0px 0px 0px;padding:20px 10px;border: 1px solid green; position:absolute; left:140px;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

Good Luck...Enjoy

score 0 · Answer 4 · answered Dec 13 '13 at 06:22

You could set the left <div> to a fixed position and float the right <div> to the left. If you do this, make sure you're using appropriate margins to counter the space the left div is taking.

.wrapper {
width:100%;
height:100%;
}
.left-sidebar {
    position: fixed;    /*---- changed this --->*/
    width:120px;
    height:200px;
    margin:20px 0 0 0;
    border:1px solid red;
}
.right-main-content{
    float: left;              /*---- changed this --->*/
    width: auto; 
    margin:20px 0 0 122px;     /*---- changed this --->*/
    border: 1px solid green;
}
.sidebar-menu{
    list-style-type:none;
}
.content{
    margin: 0px auto;
}

working example:

http://jsfiddle.net/6nLtp/6/

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

0

Use float to achive result.

css

.wrapper {width:100%;height:100%;}
.content{padding-top:20px;}
.left-sidebar {width:120px;height:200px;margin:0 0 0 0;border:1px solid red;float:left;}
.right-main-content{margin:0 60px 0 140px;border: 1px solid green;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

demo

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 13 '13 at 06:24

Rajnikant Kakadiya

2,185
1
23
30

In my case, I did give floats to the element but I forgot to write that in the fiddle. Why is it that this thing doesn't work if I give float to both the containers (which I had done in my case)? – user1240679 Dec 13 '13 at 06:37
Not to both. Give float only "left-sidebar". Right sidebar will expand in remaining space. Just give it margin left as per the width of "left sidebar". – Rajnikant Kakadiya Dec 13 '13 at 09:40

Make the div take remaining space left after sidebar

5 Answers5

css