Center div between two divs - html

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>


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)


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>


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>


.middle {
margin: auto;
width: 300px;
background-color: #DEF0FF;
margin-top: 64px;
}
This is what you are looking for?

Related

Why won't my footer stay at the bottom of the page? [duplicate]

This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 5 years ago.
just trying to figure out why I cannot get the footer to the bottom of the page (when the "latest" articles are in a 3x2 grid). I have posted all my HTML and CSS here because I am not sure where the problem is specifically.
Here is my HTML:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title></title>
</head>
<body>
<div id="container">
<header>
</header>
<div id="containerLarge">
<h1 class="heading">
</h1>
<article id="featured">
<div class="button">
</div>
</article>
<h1 class="heading">
</h1>
<div class="containerMedium">
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
I think the problem is somewhere here maybe the "containerMedium" and "latest" classes.
Here is my CSS:
/*CSS RESET*/
html, body, div, span,
h1, h2, h3, h4, h5, h6,
p, a, img, ol, ul, li,
table, tbody, tfoot, thead, tr, th, td,
embed, footer, header, nav{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*CSS RESET*/
html, body{
height:100%;
}
#container{
position: relative;
height: 100%;
min-height: 100%;
background-color: tomato;
}
header{
height: 100px;
width: 100%;
background-color: slateblue;
}
#containerLarge{
padding-bottom: 100px; /*Footer Height*/
height: 75%;
width:100%;
background-color: white;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.heading{
height: 50px;
width: 100%;
background-color: pink;
}
#featured{
margin-left: auto;
margin-right: auto;
text-align: right;
height: 300px;
width: 600px;
background-color: royalblue;
}
.button{
display: inline-block;
margin-right: 30px;
margin-top: 220px;
height: 50px;
width:200px;
background-color: gold;
border-radius: 25px;
}
.containerMedium{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 600px;
width: 50%;
background-color: crimson;
}
.latest{
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 200px;
background-color: springgreen;
}
footer{
position: absolute;
bottom: 0px;
height: 100px;
width: 100%;
background-color: deeppink;
}
Thanks for your help!
Josh

Couple things. 1) your containerlarge div which is containing the footer has height on it. No need get rid of it. 2) your footer has absolute positioning but there is no relative container to it which is causing it to overlay on top of the elements. any position property completely ignores the regular flow of the document. I updated your code.
HTML
/*CSS RESET*/
html, body, div, span,
h1, h2, h3, h4, h5, h6,
p, a, img, ol, ul, li,
table, tbody, tfoot, thead, tr, th, td,
embed, footer, header, nav{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*CSS RESET*/
html, body{
height:100%;
}
#container{
position: relative;
height: 100%;
min-height: 100%;
background-color: tomato;
}
header{
height: 100px;
width: 100%;
background-color: slateblue;
}
#containerLarge{
padding-bottom: 100px; /*Footer Height*/
width:100%;
background-color: white;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.heading{
height: 50px;
width: 100%;
background-color: pink;
}
#featured{
margin-left: auto;
margin-right: auto;
text-align: right;
height: 300px;
width: 600px;
background-color: royalblue;
}
.button{
display: inline-block;
margin-right: 30px;
margin-top: 220px;
height: 50px;
width:200px;
background-color: gold;
border-radius: 25px;
}
.containerMedium{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 50%;
background-color: crimson;
}
.latest{
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 200px;
background-color: springgreen;
}
footer{
height: 100px;
width: 100%;
background-color: deeppink;
}
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title></title>
</head>
<body>
<div id="container">
<header>
</header>
<div id="containerLarge">
<h1 class="heading">
</h1>
<article id="featured">
<div class="button">
</div>
</article>
<h1 class="heading">
</h1>
<div class="containerMedium">
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>

It's all because of the height of your inner elements. The 100% height is calculated by browser before rendering the pixel height of the container and article elements, they are larger than real 100% height of the screen.
Move your <footer> outside of the id="container" (exactly: below the "container") div and remove absolute position in the css for the footer, it will work fine.

If you want your footer at the bottom of the browser-screen an it should stay there, then CSS for the footer is:
footer{
position: fixed; /* Instead of 'absolute' */
bottom: 0px;
height: 100px;
width: 100%;
background-color: deeppink;
}
If you want your footer just at the bottom of the page, then CSS for the footer is like this:
footer {
height: 100px;
width: 100%;
background-color: deeppink;
}
With fixed footer it looks like this:
#container{
position: relative;
height: 100%;
min-height: 100%;
background-color: tomato;
}
header{
height: 100px;
width: 100%;
background-color: slateblue;
}
#containerLarge{
padding-bottom: 100px; /*Footer Height*/
height: 75%;
width:100%;
background-color: white;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.heading{
height: 50px;
width: 100%;
background-color: pink;
}
.containerMedium{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 600px;
width: 50%;
background-color: crimson;
}
.latest{
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 200px;
background-color: springgreen;
}
footer{
position: fixed;
bottom: 0px;
height: 100px;
width: 100%;
background-color: deeppink;
}
<div id="container">
<header>
This is the header
</header>
<div id="containerLarge">
<h1 class="heading">
Content Start
</h1>
<div class="containerMedium">
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
<article class="latest">
</article>
</div>
</div>
<footer>
Fixed footer
</footer>
</div>
</body>
</html>

Getting DIVs same height and not covering each other

Here is my current code in JSfiddle
There are 4 Div's two that are side by side in the middle.
What I'm trying to do is get the two child divs to be the same height as the parent and show a white background.
Right now the bottom DIV is sitting on top of the two other ones in the middle and the background isn't white.
I've been messing with different display methods (table, flex, grid) but haven't found a working combination yet.
This is my HTML
<main>
<div class="full">
<div class="gbar"><span class="hb">Testing text</span>
</div>
<div class="txt">
<p>Testing text</p>
</div>
</div>
<div class="dialog">
<div class="left">
<div class="obar"><span class="hb">Testing text</span>
</div>
<div class="txt">
<p>Testing text</p>
<p>Testing text</p>
<p>Testing text</p>
<p>Testing text</p>
</div>
</div>
<div class="right">
<div class="bbar"><span class="hb">Testing text</span>
</div>
<div class="txt">
<p>Testing text</p>
<p>Testing text</p>
</div>
</div>
</div>
<div class="full">
<div class="ybar"><span class="hb">Testing text</span>
</div>
<div class="txt">
<p>Testing text</p>
</div>
</div>
This is the CSS part I'm trying to get working
.full {
display: inline-block;
position: relative;
margin-top: 10px;
display: inline-block;
width: 100%;
background-color: #fff;
}
.dialog {
display: block;
position: relative;
margin-top: 10px;
}
.left {
display: inline-block;
position: absolute;
width: 49%;
left: 0;
top: 0;
bottom: 0;
background-color: #fff;
}
.right {
display: inline-block;
position: absolute;
width: 49%;
right: 0;
top: 0;
bottom: 0;
background-color: #fff;
}

You can use flex
.dialog {
margin-top: 10px;
width: 100%;
display: flex;
}
.left {
flex: 1;
background-color: white;
}
.right{
flex: 1;
background-color: white;
}
https://jsfiddle.net/rnk44rtn/2/

Changed the middle row to tabel layout.
.dialog {
display: table;
position: relative;
margin-top: 10px;
width: 100%;
}
.left, .right {
background: #fff;
display: table-cell;
width: 50%;
}
body {
margin: 0;
padding: 0;
background-image: url("../img/bg.jpg");
background-repeat: repeat;
}
main {
display: block;
position: relative;
padding-top: 10px;
width: 950px;
margin: 0 auto;;
}
.full {
display: inline-block;
position: relative;
margin-top: 10px;
display: inline-block;
width: 100%;
}
.dialog {
display: table;
position: relative;
margin-top: 10px;
width: 100%;
}
.left, .right {
background: #fff;
display: table-cell;
width: 50%;
}
.bbar {
width: 100%;
background: linear-gradient(#4B4A5F, #6381D9);
}
.gbar {
width: 100%;
background: linear-gradient(#589288, #576A63);
}
.obar {
width: 100%;
background: linear-gradient(#C42D25, #EC694A);
}
.ybar {
width: 100%;
background: linear-gradient(#F85A4D, #EAC746);
}
.st {
display: inline-block;
font-size: 24px;
color: #fff;
padding: 6px;
}
.hb {
display: inline-block;
padding: 8px;
font-size: 18px;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 2px #000;
}
.txt {
padding: 8px;
color: #000;
background-color: #fff;
}
<main>
<div class="full">
<div class="gbar"><span class="hb">Testing text</span>
</div>
<div class="txt">
<p>Testing text</p>
</div>
</div>
<div class="dialog">
<div class="left">
<div class="obar"><span class="hb">Testing text</span>
</div>
<div class="txt">
<p>Testing text</p>
<p>Testing text</p>
<p>Testing text</p>
<p>Testing text</p>
</div>
</div>
<div class="right">
<div class="bbar"><span class="hb">Testing text</span>
</div>
<div class="txt">
<p>Testing text</p>
<p>Testing text</p>
</div>
</div>
</div>
<div class="full">
<div class="ybar"><span class="hb">Testing text</span>
</div>
<div class="txt">
<p>Testing text</p>
</div>
</div>
</main>
https://jsfiddle.net/afelixj/o3cm8jed/3/

Move right column to the top

I'm using #media query and I'm trying to make right column to move to the top of .left div when shrinking the screen. So far I can only get it to move to the top of .middle div. I tried to play with positioning but it seems it doesn't work the way I need.
I need this structure when shrinking:
Left Column | Right Column
Middle column
Right now:
Left Column
Middle column | Right Column
See the code below.
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: 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: 300px;
background-color: #C7E6FF;
float: left;
margin-top: 64px;
margin-right: calc(50% - 450px);
}
.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;
}
#media screen and (max-width: 980px) {
body {
width: 95%;
}
.left {
width: 60%;
margin-right: 0;
}
.middle {
width: 60%;
margin-top: 10px;
}
.right {
width: calc(40% - 10px);
margin-top: 10px;
}
}
<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>

Try this
.right {
width: 300px;
position: absolute; //added this
background-color: #C7E6FF;
right: 0; //added this
margin-top: 64px;
}
In media query use this class
.right {
width: calc(40% - 10px);
margin-top: 64px; //changed this
}
Demo here

Move column to the bottom when reducing screen size

Right now the structure is following:
Left Column
Right Column
Middle Column
I need to make the next structure:
Left Column
Middle Column
Right Column
The problem is it should be done without changing the existing structure. I.e. on bigger screens the existing structure is perfect, but starting from #media screen and (max-width: 650px) the structure should change as I described.
I tried to change positioning but it seems it doesnt work properly.
Thank You!
See the code below.
https://jsfiddle.net/vw4b99b1/1/
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: 300px;
background-color: #C7E6FF;
float: left;
margin-top: 64px;
margin-right: calc(50% - 450px);
}
.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;
}
#media screen and (max-width: 980px) {
.left {
width: 60%;
margin-right: 0;
}
.middle {
width: 60%;
margin-top: 10px;
clear: both;
}
.right {
width: calc(40% - 10px);
margin-top: 64px;
}
}
#media screen and (max-width: 650px) {
.left {
width: 100%;
margin-right: 0;
}
.middle {
width: 100%;
margin-top: 10px;
clear: both;
}
.right {
width: 100%;
margin-top: 10px;
margin-right: 0;
}
}
<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>
</ul>
</div>
<div class="right">
<h4>Right Column</h4>
<ul>
<p>Some Text</p>
<p>Some Text</p>
</ul>
</div>
<div class="middle">
<h2>Middle Column</h2>
<ul>
<li><p>Some Text</p></li>
<li><p>Some Text</p></li>
</ul>
</div>
<div style="clear:both; border:none; border-radius: none;"></div>
<div id="footer">
<p>© 2015 - the Programmer</p>
</div>
</body>

Change column order using media query

What I'm trying to do is to put the right column next to the left column using media query (right now it is next to the center column). The right column should also have left margin 10px (as the screen size shrinks) as it is in the example.
I add position: absolute; right: 8px; to .right but it doesnt work the way I need.
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: 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: 300px;
background-color: #C7E6FF;
float: left;
margin-top: 64px;
margin-right: calc(50% - 450px);
}
.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;
}
#media screen and (max-width: 980px) {
body {
width: 95%;
}
.left {
width: 60%;
margin-right: 0;
}
.middle {
width: 60%;
margin-top: 10px;
clear: both;
}
.right {
width: calc(40% - 10px);
margin-top: 10px;
}
}
<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>
</ul>
</div>
<div class="middle">
<h2>Сenter Column</h2>
<ul>
<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>
</ul>
</div>
<div style="clear:both; border:none; border-radius: none;"></div>
<div id="footer">
<p>© 2015 Me - the Programmer</p>
</div>

You can achieve this by making a few changes to your CSS and HTML:
Move the .middle div after the .right div in HTML
Change margin-top: 10px; to margin-top: 64px; on .right in the media query
This works because .middle is set to float: left; which will push it to the left of its container until it hits another floated element (in this case .left). .right is set to float: right; which will push it to the right of its container.
How floats are positioned
As mentioned above, when an element is floated it is taken out of the
normal flow of the document. It is shifted to the left or right until
it touches the edge of its containing box or another floated element.
float (https://developer.mozilla.org/en-US/docs/Web/CSS/float)
When the media query is in effect .middle is set to clear: both;, as it is after both .left and .right in HTML it will be placed on a new line clearing both floated elements.
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: 300px;
background-color: #C7E6FF;
float: left;
margin-top: 64px;
margin-right: calc(50% - 450px);
}
.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;
}
#media screen and (max-width: 980px) {
body {
width: 95%;
}
.left {
width: 60%;
margin-right: 0;
}
.middle {
width: 60%;
margin-top: 10px;
clear: both;
}
.right {
width: calc(40% - 10px);
margin-top: 64px;
}
}
<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>
</ul>
</div>
<div class="right">
<h4>Right Column</h4>
<ul>
<p>Some Text</p>
<p>Some Text</p>
</ul>
</div>
<div class="middle">
<h2>Сenter Column</h2>
<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>Some Text</p>
</li>
</ul>
</div>
<div style="clear:both; border:none; border-radius: none;"></div>
<div id="footer">
<p>© 2015 Me - the Programmer</p>
</div>

You can achieve that using flexbox
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: 300px;
background-color: #C7E6FF;
margin-top: 64px;
}
.middle {
width: 300px;
background-color: #DEF0FF;
margin-top: 64px;
}
.right {
width: 300px;
background-color: #C7E6FF;
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;
}
.columns{
display:flex;
width: 100%;
justify-content: space-between;
flex-wrap:wrap;
}
.left{
order: 1;
}
.middle{
order: 2;
}
.right{
order: 3;
}
#media (max-width:980px){
.middle{
order: 3;
margin-top: 10px;
}
.right{
order:2;
}
}
<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="columns">
<div class="left">
<h2>Left Column</h2>
<ul>
<p>Some Text</p>
<p>Some Text</p>
</ul>
</div>
<div class="middle">
<h2>Сenter Column</h2>
<ul>
<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>
</ul>
</div>
</div>
<div style="clear:both; border:none; border-radius: none;"></div>
<div id="footer">
<p>© 2015 Me - the Programmer</p>
</div>