Question

im facing a problem where i need some advice.
I want to have a couple of main div containers lets say

<div class="main">

one to another to the right.

1. All main containers should have full width and height (fullscreen).
2. On the right I need a couple other main containers with the size and width of the former.

Is it possible to set the divs one another to the right without reading and setting it with javascript? Is there a css/html solution?

Example:

<div class="main"><!--to the right one more --> 
</div>

<div class="main"><!--to the right one more -->
</div>

<div class="main">
</div>

Style: #This doesn’t work…

.main{
width:100%;
height:auto;
float: right;

}

Answer 1

I may have misunderstood the question, but try

html, body {
   height: 100%;   
}

body {
    width: 300%;
}

.main {
   height: 100%;
   width: 33.333333333%;
   float: left;    
}

http://jsfiddle.net/3yaJZ/