Aligning fullscreen image divs on horizontal scrolling page

Question

I want to make a horizontal scrolling website, with fullscreen image divs. The divs will contain text, which is why I've used background-images. I can’t find a way, to place the divs neatly next to each other.

I’ve tried float and inline-block, but either it didn’t work or the divs didn’t align properly.

I’ve made a jsfiddle to show my code. Objective is to get “A" next to “B".

Here's the fiddle link

<div class="a">Text</div>
<div class="b">Text</div>

Thanks!

UPDATE – height of image must be 100%. More than two divs will be used on the website, and they will all vary in width. Here's a sketch of what I try to achieve

Answer 1

Put display:inline-block to your classes .a and .b.

.a,
.b {
  width: 100%;
  height: 100%;
  vertical-align: top;
  background-size: contain;
  background-repeat: no-repeat;
  display:inline-block;
}

Here is the Updated Fiddle

Answer 2

Using inline-block without white space relies on the HTML markup not having gaps between two elements. <div class="a">Text</div> <div class="b">Text</div> would result in a space between the two divs.

To achieve a background-image filling the width and height of a div, we can use background-size: 100% 100%; background-position:center;. Alternatively, we can use background-size:cover; if we want the background-image to crop rather than stretch.

UPDATED Fiddle : https://jsfiddle.net/v2wxv73e/2/

 #wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: scroll;
}

.a,
.b {
  width:100%;
  height:100%;
  background-size: 100% 100%;
  background-position:center;
  background-repeat: no-repeat;
  display:inline-block;
}

PREVIOUS ANSWER:

Use float:left and width:50%; when #wrapper has width: 200%.

Fiddle : https://jsfiddle.net/v2wxv73e/