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

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"> </div>
<div id="contentwrapper"> </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 :)

Answer 3

It's also possible to get 2 div's beside each other without using float's or absolute positioning.
I'm using the calc function which is supported in IE9 and above.
MDN calc specs
And don't forget the space blocker Stackoverflow: 50% wont fit because hidden space between divs
<!-- HMTL -->
<div id="maincontainer">
<div id="leftcolumn"> </div><!-- space blocker
--><div id="contentwrapper"> </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 4

there are multiple possibilities, but the easiest is using flexbox. See the documentation of the flexible box layout module for more info. Note that it is still a candidate recommendation, so some browsers could 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;
}