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/

@BuddhistBeast same line as the browser – user2133606 Dec 26 '13 at 23:26 — user2133606, Dec 26 '13 at 23:26

score 22 · Accepted Answer · answered Dec 26 '13 at 23:23

<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>

enter image description here

score 6 · Answer 2 · answered Dec 26 '13 at 23:34

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 :)

score 4 · Answer 3 · edited May 23 '17 at 12:08

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">&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;
}

score 0 · Answer 4 · answered Dec 26 '13 at 23:18

0

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.

answered Dec 26 '13 at 23:18

Rik Schaaf

1,101
2
11
30

score 0 · Answer 5 · edited Dec 26 '13 at 23:21

#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;
}

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

5 Answers5