Question

I want to position five equal sized div containers horizontally, next to each other. So far, I am setting the position and sizes explicitly:

#container1{position:absolute; top:0px; margin:20px 0 0 5px; width:260px; height:90%; padding:0 10px;}
#container2{position:absolute; top:0px; margin:20px 0 0 270px; width:260px; height:90%; padding:0 10px;}
#container3{position:absolute; top:0px; margin:20px 0 0 535px; width:260px; height:90%; padding:0 10px;}
#container4{position:absolute; top:0px; margin:20px 0 0 800px; width:260px; height:90%; padding:0 10px;}
#container5{position:absolute; top:0px; margin:20px 0 0 1065px; width:260px; height:90%; padding:0 10px;}

But I want users with different screen sizes to see the whole web page without having to scroll. I could set the width of each div to 20%, but then how would I position them?

Thank you very much

Answer 1

You can use floating position i.e. http://jsfiddle.net/aK7Lv/

Markup

<div class="floating">1</div>
<div class="floating">2</div>
<div class="floating">3</div>
<div class="floating">4</div>
<div class="floating">5</div>

Css:

.floating{
    float:left;
    width:20%;
    background:red;
    height:200px;
}