2 div in an other "container" div - Adapt width

Question

I have a problem with my css. I have 2 div "left" and "main" in a container div "container". My container's width is 90℅ of the body's width, and have a margin: %3 auto ( to center the container ).

.container{
margin:3% auto;
width:90%;}

Now, i want somethink special in my container: my "left" width = 20% of the container, a margin right on this " left div" to separate the "left" and the "main"

#left {
display:inline-block;
padding:10px;
background-color:#32CD32;
vertical-align:top;
list-style:none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:solid 2px black;
/*width:????? HERE I WANT AN ADAPTABLE WIDTH TAKING 20% OF THE CONTAINER WIDTH*/}

And my main's width have to take the rest of the container's width.

#main {
background-color:#32CD32;
vertical-align:top;
display:inline-block;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:solid 2px black;
text-align:center;
/*width:80%; HERE, I WANT AN ADAPTABLE WIDTH TAKING THE REST OF THE CONTAINER*/}

But when i use % for the main's width and the left's width, it take the body ℅. Moreover, i dont know how to say " take the rest of the container's width.

<div class="container">
<div id="left">
<li>LIST1</li>
<li>LIST2 </li>
<li>LIST3 </li></div>
<div id="main">
    <div id="new_comment"class="eblock">new comment</div>
    <div id="comments"class="eblock">
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    <div id="onecomment"> new comment </div>
    </div>
</div>
</div>

Thanks for the help.

If you have a new question please make a new post rather than editing an existing question. If you edit, you invalidate all the answers given. — gunr2171, Mar 01 '16 at 16:38

score 1 · Answer 1 · answered Mar 01 '16 at 13:03

The problem you have comes from a thing that CSS does called box sizing. This tells the browser how to layout your boxes (e.g. your div elements).

The default box-sizing that modern browsers use is called padding-box. It calculates the width of your boxes (in your example 20% or 80% of the #container) and then adds padding and borders to that calculated width. This means your elements end up taking up more space than you initially intended them to do.

One possible solution is to override the default box-sizing. Setting box-sizing: border-box tells the browser to include padding and borders when calculating the width, i.e. these values are included in the 20% of the containers width. Lots of people advise just setting this on all elements (see Paul Irish's article on the topic).

In your case I'd suggest setting:

#left {
    width: 20%;
    margin-right: 5%;
}

#main {
    width: 75%;
}

Now, in some cases the browser has to round values. Because of this you might end up with values that sum up to more than the available space. Should this happen, just play around with some of the percentages (e.g. set margin-right: 4%).

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

Here you go

Working jsfiddle

.container {
    width:90%;
    height:200px;
    border:1px solid;
}

.left {
    width:auto;
    height:200px;
    background:red;
    overflow:hidden;

 }

.main {
    height:200px;
    width:60%;
    background:blue;
    float:left;
    margin-right: 10px;
 }

With inspiration from https://stackoverflow.com/a/1767270/5999686

edited May 23 '17 at 11:50

Community

1
1

answered Mar 01 '16 at 13:03

Marc Hjorth

1,797
2
18
24

Thanks man, I adapted my code and it worked, but i have an other problem because of this update :/ ( I edited the post ) – LogicTest Mar 01 '16 at 15:52

2 div in an other "container" div - Adapt width

2 Answers2