How to make two div side by side using inline block?

Question

How can I make divs side by side, and one of the divs ('contentwrapper') will respond to resizing the browser.

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

It is also possible to get 2 divs next to each other without using a float or absolute positioning. I am using calc function which is supported in IE9 and above. MDN calc specs And don't forget about the space blocker

 <!-- HMTL --> <div id="maincontainer"> <div id="leftcolumn">&nbsp;</div><!-- space blocker --><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: calc(100% - 100px); height: 100%; background-color: red; } 

Answer 3

Good, so I think this will be the fastest solution for you. You already have a good html structure, but I'm going to narrow it down more for you. Here is the JsFiddle .

With code:

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

I made a small setup like this:

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

and then I also changed two other things, for example:

 #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 created the appropriate width, so you can always change it. Keep in mind that if you use 100% as the width and try to insert something else on the same line, it will automatically create two lines, for example:

 #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 are restructuring this, do the following:

 #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 notes, I added height using JsFiddle so that I can see the actual sizes, and I also added width for the same reason. Something a note that can really help with implementations, but the basic “why this work” is this .

Comment below if something is not working for you :)

Answer 4

There are several possibilities, but the easiest way is to use flexbox. See the flex box module documentation for more information. Please note that this is a candidate’s recommendation, so some browsers may have problems with it.

Answer 5

 #maincontainer { width:100%; height: 100%; } #leftcolumn { display:inline-block; position: absolute; width: 340px; float: left; height: 100%; background: blue; } #contentwrapper { display:inline-block; margin-left: 340px; // see how this is equal to the width of #left-column position: absolute; // might want to try with this or position relative max-width: 100%; width: 100%; // might want to try with or without this line height: 100%; background-color: red; }