How to make two divs side by side using inline-block?

Question

How can I make the divs side by side and one of the div ('contentwrapper') be responsive to the browser resizing.

HMTL

<div id="maincontainer"> <div id="leftcolumn">&nbsp;</div>  <div id="contentwrapper">&nbsp;</div> </div> 

CSS

#maincontainer {     width:100%;     height: 100%; }  #leftcolumn {     display:inline-block;     width: 100px;     height: 100%;     background: blue; }  #contentwrapper {     display:inline-block;     width:100%;     height: 100%;     background-color: red; } 

JSFIDDLE http://jsfiddle.net/A5HM7/

Answer 1

<style>   #maincontainer {     width:100%;     height: 100%;   }    #leftcolumn {     float:left;     display:inline-block;     width: 100px;     height: 100%;     background: blue;   }    #contentwrapper {     float:left;     display:inline-block;     width: -moz-calc(100% - 100px);     width: -webkit-calc(100% - 100px);     width: calc(100% - 100px);     height: 100%;     background-color: red;   } </style> 

Answer 2

Ok, so I think this will be the quickest fix for you. You already have a great html structure but I am going to narrow it down more for you. Here is the JsFiddle.

With your code:

#maincontainer {     width:100%;     height: 100%; } 

I have made a minor adjustment like so:

#maincontainer {     width:100%;     height: 100%;     display:inline-block;//added this } 

and then I also restructured two other things like so:

#leftcolumn {     float:left;//added this     width: 100px;     height:100%;     background: blue; } #contentwrapper {     float:right;//added this     width:100%;     height: 100%;     background-color: red; } 

Now in this JsFiddle, I have appropriately created a specific width, so you can always change that. Please keep in mind that if you use 100% as a width, and try to stick something else in that same line, it will automatically create two lines such like so:

#leftcolumn {     display:inline-block;<-- changed this above.     width: 100px;<----This won't work with the below     height: 100%;     background: blue; }  #contentwrapper {     display:inline-block;<---- changed this above.     width:100%;<---- This won't work with the above     height: 100%;     background-color: red; } 

But if you restructure that to be more like this:

#leftcolumn {     display:inline-block;     width: 10%;<---This will work with the below     height: 100%;     background: blue; }  #contentwrapper {     display:inline-block;     width:90%;<---This will work with the above.     height: 100%;     background-color: red; } 

A few things to note, I did add in a height with the JsFiddle so that I could see the actual dimensions and I also added in width for the exact reason. Something to note that can really help out with implementations and the basic "why does this work" is this.

Comment below if something doesn't work for you :)