How would I align my boxes without them pushing one another?

Question

I've been trying to get my 3 boxes to fit in perfectly under my banner but for some reason when I set the width of all and 10px padding it drops one of them under the other two... I'm not sure why but if you can take a look and let me know, thanks. I want it to be exactly in the center and inline with the banner preferable.

<!DOCTYPE html>
<html>
<head>

  <title>site</title>

  <meta name="description" content="" />

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <link rel="stylesheet" href="styles.css" />
  <link href='https://fonts.googleapis.com/css?family=Libre+Franklin' rel='stylesheet' type='text/css'>
  <script src="js/jquery.min.js"></script>
  <!--[if lt IE 8]>
  <![endif]-->

</head>
<body>
    <div id="header">
        <nav>
        <ul>
            <li><a href="">Contact</a></li>
            <li class="nav-sep">|</li>
            <li><a href="">Portfolio</a></li>
            <li class="nav-sep">|</li>
            <li><a href="">Blog</a></li>
            <li class="nav-sep">|</li>
            <li><a href="">About</a></li>
            <li class="nav-sep">|</li>
            <li><a href="">Home</a></li>
        </ul>

        </nav>
        <div id="banner"></div>
    </div>

    <div id="content-container">
    <div class="content-box"></div>
        <div class="content-box"></div>
    <div class="content-box"></div>
    </div>

</body>
</html>

body {
    background: #f9f9fb;
    margin: 0px;
    padding: 0px;
}

nav {
    width: 1530px;
    height: 60px;       
    margin: auto;
}

nav ul {
    list-style-type: none;
    margin: auto -20px auto auto;
}

nav li {
    display: inline-block;
    line-height: 60px;
    float: right;
}

nav a {
    text-decoration: none;
    color: #f9f9fb;
    font-family: 'verdana', sans-serif;
    padding: 0 20px;
    font-size: 0.85em;
    display: block;


}

nav a:hover {
    color: #f9f9fb;
    transition: color 0.8s ease;

}


#header {
    width: 100%;
    height: 340px;
    background-color: #212429;
}

#banner {
    width: 1530px;
    height: 579px;
    background: url('banner.png');
    margin: auto;

}

li.nav-sep {
        color: #313642;
}

.content-box {
    width: 496px;
    height: 496px;
    background-color: red;
    float: right;
    margin: 8px;


}

#content-container {
    max-width: 1530px;
    margin: 320px auto auto auto;

}

score 0 · Answer 1 · answered Aug 12 '16 at 22:36

The boxes are 496px each. They each have 8px of margin on the left and right side.

(496 + 8 + 8) * 3 = 1536

So the container needs to be 1536 pixels or wider to hold them all.

Change the content-container's width to 1536:

#content-container {
    max-width: 1536px;
    margin: 320px auto auto auto;
}

score 0 · Answer 2 · answered Aug 12 '16 at 22:38

0

try

#content-container {
    display:inline-flex;
    max-width: 1530px;
    margin: 320px auto auto auto;

}

and let me know

answered Aug 12 '16 at 22:38

Nicolas Epaminonda

181
1
3
13

you want the items to be aligned center or the container itself? – Nicolas Epaminonda Aug 12 '16 at 23:06

score 0 · Answer 3 · answered Aug 12 '16 at 22:41

To align all the boxes, you have to make following changes:

.content-box {
    width: 32.2%;
    height: 496px;
    background-color: red;
    float: left;
    margin: 8px;


}

#content-container {
    max-width: 1530px;
    margin: 320px auto;

}

Take a look at the container's width. If you divide it into three halves, each of your content-box has to be less than the number. And its always better to use the width in percentage so that it works well on different screen sizes.

score 0 · Answer 4 · answered Aug 12 '16 at 22:49

0

remove the float: right from your .content-box class and add this to #content-container:

#content-container {
  max-width: 1536px;
  margin-top: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

answered Aug 12 '16 at 22:49

Marouen Mhiri

1,640
1
14
20

score 0 · Answer 5 · edited May 23 '17 at 12:24

Hi and welcome to Stack Overflow - as per your question there are 2 main cases :

content-container's width = 1530px in which case the boxes would have a width of 499.99px

boxes with a margin of 8px on the left = 8*3 = 24px + 8px gap on the extreme right = 32px

1530 - 32 = 1498px left for all the boxes

1498 / 3 = 499.99 px for each box
the boxes have a width of 496px in which case content-container would have a width of 1520px

boxes with a margin of 8px on the left = 8*3 = 24px + 8px gap on the extreme right = 32px

496 * 3 = 1488px

1488 + 32 = 1520px for content-container

You also need to give your content-container an actual width and float your boxes left

#content-container {
    width: 1530px;
    margin: 320px auto auto auto;
} 
.content-box {
    width: 499px;
    height: 496px;
    background-color: red;
    float: left;
    margin-left: 8px;
}

you can also use percentages to make life easier and responsive

Check out a similar question here

Good Luck :)

How would I align my boxes without them pushing one another?

5 Answers5