CODEWITHSUNDEEP
htmlcss
Artem Z
Artem Z

Reputation: 565

Center div between two divs

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>

Upvotes: 4

Views: 2651

Answers (4)

Marc Audet
Marc Audet

Reputation: 46785

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>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115046

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>

Upvotes: 4

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

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)

Upvotes: 4

SpaceChimps
SpaceChimps

Reputation: 135

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

This is what you are looking for?

Upvotes: 0

Related Questions