I'm facing an issue with my CSS. I have a container div "container" that contains two other divs - "left" and "main". The width of the container is set to 90% of the body's width, with a margin of 3% auto to center it.
.container{
margin:3% auto;
width:90%;}
Now, I want something specific for my container: I want the "left" div to take up 20% of the container's width, with a right margin separating it from the "main" div.
#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 the width of the "main" div should fill up the remaining space in the container.
#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*/}
When I use % for the width of the main and left divs, they end up taking the body's width instead. Additionally, I'm unsure how to specify "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>
Any help would be greatly appreciated.