Center div between two divs

Question

How to center .middle div between two other divs? I tried margin: 0 auto; margin-left: auto, margin-right: auto; etc. But I can't achieve the right effect. This .middle div should be in between the two.

Go full screen to see what I mean.

Thank You.

div {
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#header {
    height: 52px;
    width: calc(100% - 16px);
    background-color: #B2D490;
    z-index: 1;
    position: fixed;
    top: 10;
}
h1 {
    color: #FFFFFF;
    padding-left: 25px;
    margin: 0;
    display: inline;
    font-size: 27px;
    line-height: 50px;
}
h2, h3, h4, h5, h6 {
    padding-left: 10px;
    margin: 10px 0 10px 0px;
    color: #00457D;
}
.left {
    width: 300px;
    background-color: #C7E6FF;
    float: left;
    margin-top: 64px;
}
.middle {
    width: 300px;
    background-color: #DEF0FF;
    margin-top: 64px;
    float: left;
}
.right {
    width: 300px;
    background-color: #C7E6FF;
    float: right;
    margin-top: 64px;
}
#footer {
    height: 35px;
    width: 100%;
    background-color: #57C449;
    clear: both;
    position: relative;
    margin-top: 10px;
}
p {
    color: #00579E;
}
#footer p {
    color: #FFFFFF;
    text-align: center;
    margin: auto;
    line-height: 35px;
}
span {
    color: #D4EBFF;
}

 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>My Resume</title>
 </head>
 <body>
 <div id="header">
     <h1>My <span>Resume</span></h1>
 </div>
 <div class="left">
     <h2>Left Column</h2>
         <ul>
             <p>Some Text</p>
             <p>Some Text</p>
             <p>Some Text</p>
             <p>Some Text</p>
             <p>Some Text</p>
         </ul>
 </div>
  <div class="middle">
     <h2>Centered Center Column</h2>
         <ul>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
        </ul>
 </div>
 <div class="right">
     <h4>Right Column</h4>
         <ul>
             <p>Some Text</p>
             <p>Some Text</p>
             <p>Some Text</p>
        </ul>
 </div>
 <div style="clear:both; border:none; border-radius: none;"></div>
 <div id="footer">
     <p>© 2015 Me - the Programmer</p>
 </div>

score 4 · Answer 1 · answered Sep 09 '15 at 14:14

You could wrap your 3 containers into one and the use flexbox

Basically I added a container with a class container-centerand this css:

.container-center {
    display: flex;
    justify-content: space-between;
    }

as in this JSFIDDLE

(I also removed the float from the right, middle, left)

score 4 · Answer 2 · answered Sep 09 '15 at 14:14

There is no really easy way to do this with floats but it's simpler if you wrap all the elements in a div (or other sectoning element) and use flexbox.

You should note however, that even with flexbox this requires that the two "side" elements have the same width.

Codepen Demo as the SO Snippets are of resticted width.

div {
  border-radius: 4px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

h1 {
  color: #FFFFFF;
  padding-left: 25px;
  margin: 0;
  display: inline;
  font-size: 27px;
  line-height: 50px;
}

h2,h3,h4,h5,h6 {
  padding-left: 10px;
  margin: 10px 0 10px 0px;
  color: #00457D;
}

main {
  overflow: hidden;
  padding-top: 64px;
  display: flex;
  justify-content: space-between;
}

.left {
  width: 300px;
  background-color: #C7E6FF;
}

.middle {
  width: 300px;
  background-color: #DEF0FF;
}

.right {
  width: 300px;
  background-color: #C7E6FF;
}

p {
  color: #00579E;
}

span {
  color: #D4EBFF;
}

<main>
  <div class="left">
    <h2>Left Column</h2>
    <ul>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
    </ul>
  </div>
  <div class="middle">
    <h2>Centered Center Column</h2>
    <ul>
      <li>
        <p>Some Text</p>
      </li>
      <li>
        <p>Some Text</p>
      </li>
      <li>
        <p>Some Text</p>
      </li>
    </ul>
  </div>
  <div class="right">
    <h4>Right Column</h4>
    <ul>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
    </ul>
  </div>
</main>

Marc Audet · Accepted Answer · 2015-09-10T10:50:01.400

Here is one way of doing it using your HTML as given and using floats.

First, in #header, fix the syntax so that top: 10px, you need units (px).

Since your three div's have known widths, you can take advantage of this with the calc CSS function to determine the right margin for .left as follows:

margin-right: calc(50% - 300px);

The center of the page is at the 50% position. Take away 200px for the width of the .left element, and then 100px for the half-width of the .middle element. The net result is that the .middle element appears in the middle of the page, as you desired.

However, you may want to specify a min-width for the page otherwise the .middle element could overlap the .left if the page width is narrow enough. Alternatively, take care of small screens using media queries.

(Note that I used widths of 200px instead of 300px so that the demonstration fitted in the small windows of the code editor.)

div {
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#header {
    height: 52px;
    width: calc(100% - 16px);
    background-color: #B2D490;
    z-index: 1;
    position: fixed;
    top: 10px;
}
h1 {
    color: #FFFFFF;
    padding-left: 25px;
    margin: 0;
    display: inline;
    font-size: 27px;
    line-height: 50px;
}
h2, h3, h4, h5, h6 {
    padding-left: 10px;
    margin: 10px 0 10px 0px;
    color: #00457D;
}
.left {
    width: 200px;
    background-color: #C7E6FF;
    float: left;
    margin-top: 64px;
    margin-right: calc(50% - 300px);
}
.middle {
    width: 200px;
    background-color: #DEF0FF;
    margin-top: 64px;
    float: left;
}
.right {
    width: 200px;
    background-color: #C7E6FF;
    float: right;
    margin-top: 64px;
}
#footer {
    height: 35px;
    width: 100%;
    background-color: #57C449;
    clear: both;
    position: relative;
    margin-top: 10px;
}
p {
    color: #00579E;
}
#footer p {
    color: #FFFFFF;
    text-align: center;
    margin: auto;
    line-height: 35px;
}
span {
    color: #D4EBFF;
}

<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>My Resume</title>
 </head>
 <body>
 <div id="header">
     <h1>My <span>Resume</span></h1>
 </div>
 <div class="left">
     <h2>Left Column</h2>
         <ul>
             <p>Some Text</p>
             <p>Some Text</p>
             <p>Some Text</p>
             <p>Some Text</p>
             <p>Some Text</p>
         </ul>
 </div>
  <div class="middle">
     <h2>Centered Center Column</h2>
         <ul>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
        </ul>
 </div>
 <div class="right">
     <h4>Right Column</h4>
         <ul>
             <p>Some Text</p>
             <p>Some Text</p>
             <p>Some Text</p>
        </ul>
 </div>
 <div style="clear:both; border:none; border-radius: none;"></div>
 <div id="footer">
     <p>© 2015 Me - the Programmer</p>
 </div>

Thank You! Everything works perfectly. Although I assume you mean 300px (of which 150px is a half) not 200px. — Artem Z, Sep 10 '15 at 10:00
@ArtemZ I fixed the numbers in my original post to make it consistent with the 200px widths. In you case with 300px wide elements, the offset would be 450px (300 + 300/2). All the best! — Marc Audet, Sep 10 '15 at 10:51

score 0 · Answer 4 · answered Sep 09 '15 at 14:09

0

 .middle {
    margin: auto;
    width: 300px;
    background-color: #DEF0FF;
    margin-top: 64px;
}

This is what you are looking for?

answered Sep 09 '15 at 14:09

SpaceChimps

115
7

margin: auto; should horizontally center an element within its container. If i remember right. – SpaceChimps Sep 09 '15 at 14:13
If the op doesn't want my answer the op can just choose not mark it as an answer. I just know that margin:auto is centering the element. You do not have to be a smartass about it :-) – SpaceChimps Sep 09 '15 at 15:00

Center div between two divs

4 Answers4