CODEWITHSUNDEEP
htmlcsscentering
justRadojko
justRadojko

Reputation: 257

Centering the container of divs

I'm trying to center container of divs (gray boxes) so that A=B. This equality should be preserved during resizing of the browser windows. Also, when the window is smaller then the width of current number of divs in a row, div arrangement should change to less number of columns.

I was trying to find some code, but no luck. Hope that someone could help.

enter image description here

And this is the code I have for now

HTML:

<div id="Area">
    <div id="container">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</div>

CSS:

#Area {
    padding: 30px 50px; /* top and bottom 25px, left and right 50px */
}

#container{
    width: 90%;
    margin: 0 auto;
}

.square {
    display: inline-block;
   margin: 7 auto;
   width: 350px;
   height: 200px;
   background-color: gray;
   border: 1px black solid;
}

UPDATE.

After Shai's help, I've come up to a new problem. Divs are now stacked liked this:

enter image description here

But I would like to have them like this:

enter image description here

Upvotes: 0

Views: 48

Answers (4)

Todd Mark
Todd Mark

Reputation: 1885

Could your heard about media query. I use the attribute to achieve your purpose.
This is my JSFiddle.
The main code:

@media screen and (min-width:352px){
    #container{
        text-align: center;
    }
}

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

Another solution(which i prefer most) is to remove dsiplay: inline-block(so keep default block) and use margin: 0 auto. Also add margin-bottom at x px according to your needs.

#Area {
    padding: 30px 50px;
    /* top and bottom 25px, left and right 50px */
}
#container {
    width: 90%;
    margin: 0 auto;
}
.square {
    margin: 7 auto;
    width: 350px;
    height: 200px;
    background-color: gray;
    border: 1px black solid;
    margin: 0 auto;
    margin-bottom: 5px;
}
<div id="Area">
    <div id="container">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</div>

Upvotes: 0

malifa
malifa

Reputation: 8165

A quick fix without changing your markup and styles would be to give your #area the position:relative; and width:100% attributes as well as changing the width:90% to a full width:100% of your #container

#Area {
    padding: 30px 50px; /* top and bottom 25px, left and right 50px */
    width: 100%;
    position: relative;
}

#container{
    width: 100%;
    margin: 0 auto;
}

http://jsfiddle.net/8a0035ep/

Upvotes: 1

Shai
Shai

Reputation: 7317

Add text-align: center; to the #container.

Working JSFiddle

Upvotes: 2

Related Questions