CODEWITHSUNDEEP
htmlcss
Skeptar
Skeptar

Reputation: 189

set 3 div containers in the middle

I created now 3 Div container's. The width of each container is 300px + 2*4px for each border (right & left). The div containers are in a section and the width of the section is 1200px. And the result is now 92px space between each container. (1200px - (308px*3))/3 = 92px. But if i set a margin-left of 92px the space isnt correct and the containers arent in the middle of the section. Here is myPage and the Code: 

*{
    margin: 0px;
    padding: 0px;
}

section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: #00ff00;
    overflow: hidden;
}


.divbox{
    height: 300px;
    width: 250px;
    border: 4px dashed black;
    border-radius: 10px;
    float: left;
    margin-left: 92px;
}

.divbox:after{
    float: none;
}
<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <section>
            <article>
                <div class="divbox">
                    content
                </div>
                <div class="divbox">
                    content
                </div>
                <div class="divbox">
                    content
                </div>
            </article>
        </section>
    </body>
</html>

Upvotes: 0

Views: 58

Answers (2)

indubitablee
indubitablee

Reputation: 8216

something like this? http://jsfiddle.net/swm53ran/124/

This code is responsive (will always stay in the middle of the screen even if you change the width of the screen)

<div class="layout">
    <div class="centre">
        <div class="divbox">
            content
        </div>
        <div class="divbox">
            content
        </div>
        <div class="divbox">
            content
        </div>
    </div>
</div>

div.layout
{
  text-align: center;
}
div.centre
{
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

EDIT: added margins for the space in the middle

margin-left:20px;
margin-right:20px;

Upvotes: 2

jmore009
jmore009

Reputation: 12933

Your math is off. For one your width is 250px not 300px. And you're dividing by 3 when there is 4 spaces that need to be treated evenly. The difference between all spaces comes to 106.5 (round down):

enter image description here

.divbox{
    height: 300px;
    width: 250px;
    border: 4px dashed black;
    border-radius: 10px;
    float: left;
    margin-left: 106px;
}

EXAMPLE 1

But instead of using floats and margin to center these a better option to always assure that they are centered is to use display: inline-block and then set text-align: center on the parent section:

section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: #00ff00;
    overflow: hidden;
    text-align: center; //add
}


.divbox{
    display: inline-block; //add instead of float
    height: 300px;
    width: 250px;
    border: 4px dashed black;
    border-radius: 10px;
    margin: 0 50px;
}

EXAMPLE 2

Upvotes: 2

Related Questions