CODEWITHSUNDEEP
htmlcss
user829174
user829174

Reputation: 6362

How to align divs according to screen resolution

I am trying to create a website the is contained of 8 divs. each div has a different height (same width).

The divs should be aligned one next to the other according the browser screen resolution in the following way:

 _________________________
|                         |
| ##### ##### ##### ##### |
| ##1## ##2## ##3## ##4## |
| #####       ##### ##### |
|       ##### ##### ##### |
| ##### ##6##       ##### |
| ##5## ##### ##7##       |
| #####             ##8## |
|_________________________|

The idea is that once a user has a smaller width, the divs will become 3 columns in the following way:

 ___________________
|                   |
| ##### ##### ##### |
| ##1## ##2## ##3## |
| #####       ##### |
|       ##### ##### |
| ##### ##5##       |  (There will be a scrollbar if needed)
| ##4## ##### ##### |
| #####       ##6## |
| ##### ##8## ##### |
| #####             |
|                   |
| ##7##             |
|___________________|

and if the user has a wider screen resolution, there will be 5 columns

 _______________________________
|                               |
| ##### ##### ##### ##### ##### |
| ##1## ##2## ##3## ##4## ##5## |
| #####       ##### ##### ##### |
|       ##7## ##### #####       |
| #####       #####             |
| ##6##                         |
| #####       ##8##             |
|_______________________________|

Please notice that the padding between the cells and the cols stays the same.

Also notice that the order of the divs should be kept the same, meaning if you count from left to right it should preserve the order of 1-8.

it should support IE8

I appreciate your assistance!

Upvotes: 0

Views: 8465

Answers (5)

Jamie Paterson
Jamie Paterson

Reputation: 446

OK, there are a couple of considerations. 1/ Are you using media queries - I hope so - and you should be to get this done correctly. Use 

    @media all and (max-width:640px){
    styles in here
    }
    @media all and (max-width:320px){
    styles in here
    }
Also The syles in here do need to be percentages - if you want 3 columns at say 320px but 4 colums at 640px use this 
    @media all and (max-width:320px){
        div.column{/* 3 columns /
            width:33%; display-inline-block; padding:10px;
            -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;

        }
    }
    @media all and (max-width:640px){
        div.column{/ 4 columns */
        width:25%; display-inline-block; padding:10px;
        -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; 
        }
    }
DO NOT FORGET to use the "border-box" as this makes the box model include the paddings as the overall size rather than add to the box model and cause it to be too large for its parent container.

Upvotes: 0

Alexander Matlin
Alexander Matlin

Reputation: 31

In that situation I prefer use float: left style. This allows divs automatically aligned one next to the other according the browser screen resolution.

<div class="div-container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
</div>​

Your styles can be:

#div-container
{
   width: 100%;
}

#div-container div
{
   float: left;
   width: 100px; //your fixed size
}

Also there is a useful jQuery plugin: http://masonry.desandro.com/

Upvotes: 0

Afshin
Afshin

Reputation: 4215

<html>
<head>
<style type="text/css">

    #main{
        width:100%;
        margin:auto;
}
.test{
    display:inline-block;
    width:300px;
    border:thin blue solid;

}
</style>
</head>
<body>
    <div id="main">
        <div class="test">Blah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
        Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
        Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah Blah</div>
        <div class="test">Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
        Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah</div>

    </div>
</body>
</html>

Upvotes: 0

Mark
Mark

Reputation: 5720

set your divs to use display: inline-block; this will ensure each row isn't staggered.

then use css3 media queries to account for the various screen sizes.

tutorial about media queries. http://webdesignerwall.com/tutorials/css3-media-queries

DEMO: http://jsfiddle.net/tgdYq/ (resize the pane with the output)

as a quick example:

div {
    display: inline-block;
    width: 25%;
}

@media screen and (max-width: 420px) {
  div {
    width: 33%;
  }
}

@media screen and (min-width: 1200px) {
  div {
     width: 20%;
  }
}

Upvotes: 1

Sowmya
Sowmya

Reputation: 26989

Specify the width of the divs in %.

Example

HTML

<div class="wrapper">
<div class="dv">1</div>
<div class="dv">2</div>
<div class="dv">3</div>
<div class="dv">4</div>
<div class="dv">5</div>
<div class="dv">6</div>
<div class="dv">7</div>
<div class="dv">8</div>
</div>​

CSS

.wrapper{width:100%; 
background-color:red; 
overflow:auto; 
margin:0; padding:0}

.dv{width:25%; 
background-color:green; 
border:grey solid 1px; 
height:100px; float:left; 
display:table}

​Demo here http://jsfiddle.net/h5GeK/3/

Upvotes: 0

Related Questions