2 divs both 100% next to each other

Question

Quite simple question but tried about everything.

what i want is 2 (actually 5) divs next to eachother with the class "container" so i can make a horizontal 1page website. Each div has to be 100% wide. so 2 divs mean 2 screens next to eachother.

This is the css line i have now:

.container { width: 100%; float: left; display: inline; }

I cant get them to line up next to each other.

Here is a visual to make it more clear. image url for bigger preview: http://www.luukratief.com/stackoverflow.png

The scrolling part is not the issue for me, just the placement of the divs.

Is this possible using percentages or is this simply not possible. If so, please tell me how to do this with css.

Thanks in advance!

Answer 1

You can make a container with 200% width and then put two divs inside of that element with 50% width so you will make sure that one div always gets the whole visitors screen width.

For example:

<div class="container">
    <div class="contentContainer"></div>
    <div class="contentContainer"></div>
</div>

And CSS:

.container {
    width: 200%;
}

.contentContainer {
    width: 50%;
    float: left;
}