HTML/CSS - Positioning several DIV elements side by side, each div being 100% width/height of the browser

Question

I can't figure this out and it's probably fairly simple. I have several DIV elements that I need placed side by side (with no margin in between), and each div must have a set width of 100% of the browser width and min-height of 100% of the browser.

Like I said I'm sure there's a quick and easy trick to this, I just couldn't find much in my research. Thank you much!

Update: This seems to work: http://pastebin.com/kuQyfwuG

Answer 1

Maybe you can wrap all your divs in a container div whose width is a lot bigger than the width of the browser (or at least the total width of all your divs laid side by side):

HTML

<div id="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

CSS

body {
  overflow: hidden;
}

#container {
  width: 10000px;
  height: 100%;
}

.element {
  min-height: 100%;
  ...
}

jQuery

$('.element').css('width', window.innerWidth);

body was given the property overflow: hidden; so that no horizontal scrollbars will be shown because of #container 's size. And since giving .element a width of 100% will make it as wide as the #container element, you can add a little jQuery to make their width equal to the window's/browser's width.