Rakesh Renzous Rakesh Renzous - 4 months ago 16
CSS Question

How to place two divs side by side when stretched to full size?

I have two

div
s streched to the size of the parent(
body
), but on application of inline-block attribute the divs are placed one below the other instead of beside each other.

I want them to be placed beside each other, such that i need to scroll horizontally instead of vertically.

jsFiddle - http://jsfiddle.net/wJ73v/364/

html
<div class="red"></div>
<div class="red-blue"></div>

css

html {
height: 100%;
width: 100%;
}
body {
margin:0;
padding: 0;
height: 100%
}
.red {
background-color: red;
height: 100%;
width: 100%;
display: inline-block;
}
.red-blue {
background: linear-gradient(red, blue);
height: 100%;
width: 100%;
display: inline-block;
}

Answer

Do like this, add white-space: nowrap to the body

html,
body {
  height: 100%;
  margin: 0;
  white-space: nowrap;
}
.red {
  background-color: red;
  height: 100%;
  width: 100%;
  display: inline-block;
}
.red-blue {
  background: linear-gradient(red, blue);
  height: 100%;
  width: 100%;
  display: inline-block;
}
<div class="red"></div>
<div class="red-blue"></div>

If you want to get rid of that vertical scroll, you can set overflow-y: hidden; on the body.

If you need the scroll, you can use flexbox.

html, body {
  height: 100%;
  margin: 0;
  display: flex;
}
.red {
  background-color: red;
  height: 100%;
  width: 100vw;
}
.red-blue {
  background: linear-gradient(red, blue);
  height: 100%;
  width: 100vw;
}
<div class="red"></div>
<div class="red-blue"></div>