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>
Related
I am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>
You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
So I have a silly question, how do I get my divs on the right side? I have main content but I need to set up four divs on the right side. It looks like this and I need to add div1 - 4. Am I supposed to add width:100%; float: left in .main_container?
Question #2 - I would like to group main_info1 - 3 under one div like main so that I could use .main in css with max-width: 900px; overflow: hidden; margin-left: 20px; attributes for all divs without the need for repeating but when I do that main_info2 jumps up and ignores main_info1 lists. Thanks.
HTML:
<div class="main_container">
<div class="title_container">
<h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
<div class="block1">
<span>Text</span>
</div>
<div class="block2">
<span>Text</span>
</div>
</div>
</aside>
<div class="content clearfix">
<div class="image1">
<img src="img/img1.jpg">
</div>
<div class="image2">
<img src="img/img2.jpg">
</div>
</div>
<div class="main_info">
<h2>Title</h2>
<p>Text</p>
</div>
<div class="main_info2 clearfix">
<h2>Title</h2>
<ul>
<li>
<p>Text</p>
</li>
</ul>
</div>
<div class="main_info3 clearfix">
<h2>Title</h2>
<p>Text</p>
</div>
</div>
CSS:
.main_container {
width: 1360px;
margin: 0 auto;
background: url("../img/bg.jpg") left top no-repeat;
background-color: #0c0334;
}
.title_container {
display: table;
}
.title_container h1 {
float: left;
display: table-cell;
vertical-align: top;
margin-top: 50px;
margin-left: 20px;
line-height: 66px;
}
.small_blocks {
min-width: 900px;
overflow: hidden;
}
.small_blocks div {
height: 55px;
margin-top: 30px;
}
.small_blocks .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 595px;
line-height: 52px;
}
.small_blocks .block1 span {
font-size: 30px;
padding-left: 20px;
font-weight: 100;
}
.small_blocks .block2 {
float: left;
width: 285px;
background: #e26c34;
padding-left: 20px;
line-height: 52px;
vertical-align: middle;
}
.small_blocks .block2 span {
font-size: 30px;
padding-left: 10px;
font-weight: 100;
vertical-align: middle;
display: inline-block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.content {
width: 900px;
height: 377px;
overflow: hidden;
margin: 20px 0 0 20px;
}
.content .image1 {
float: left;
width: 268px;
}
.content .image2 {
float: left;
margin-left: 10px;
width:100%;
max-width: 622px;
}
.main_info {
max-width: 900px;
overflow: hidden;
margin-top: 60px;
margin-left: 20px;
}
.main_info h2 {
height: 34px;
border-bottom: 1px solid #390b5d;
}
.main_info2 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #110321;
}
.main_info2 h2 {
background: #390b5d;
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
.main_info3 {
max-width: 900px;
overflow: hidden;
margin: 60px 0px 0px 20px;
background: #390b5d;
}
.main_info3 h2 {
min-height: 55px;
width: 880px;
padding-left: 20px;
height: 34px;
color: #fff;
line-height: 52px;
}
I think you are a newbie. You should work hard to master in HTML and CSS. :)
However, here is a solution. Please inspect them closely. Hopefully you will get your answers.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.wrapper {
min-width: 1000px;
max-width: 1360px;
margin: 0 auto;
padding: 0 20px;
}
.title_container {
padding-top: 50px 0 30px;
}
.title_container h1 {
line-height: 66px;
}
.small_blocks {
height: 55px;
overflow: hidden;
margin-bottom: 20px;
font-size: 30px;
font-weight: 100;
line-height: 52px;
color: #fff;
}
.small_blocks > div {
height: inherit;
float: left;
padding-left: 20px;
}
.small_blocks .block1 {
background: #390b5d;
width: 66.111111%;
}
.small_blocks .block2 {
width: 33.888889%;
background: #e26c34;
}
.content {
/*height: 377px;*/
overflow: hidden;
margin-bottom: 60px;
}
.content > div img {
width: 100%;
height: auto;
}
.content .image1 {
float: left;
width: 29.777778%;
}
.content .image2 {
float: left;
width: 70.222222%;
padding-left: 10px;
}
.main_container {
width: 68.181818%;
float: left;
}
.main_info {
margin-bottom: 60px;
background: #d7d7d7;
}
.main_info .head {
padding-left: 20px;
background: #000;
color: #fff;
}
.main_info h2 {
height: 34px;
line-height: 34px;
}
.main_info .body {
padding: 20px;
}
.sidebar {
width: 31.818182%;
padding-left: 20px;
float: right;
}
.sidebar_block {
min-height: 150px;
margin-bottom: 20px;
padding: 20px;
background: #000;
color: #fff;
}
<div class="wrapper">
<header class="title_container">
<h1>Title</h1>
</header>
<main class="main_container">
<div class="small_blocks">
<div class="block1">
<span>Block 1</span>
</div>
<div class="block2">
<span>Block 2</span>
</div>
</div>
<div class="content clearfix">
<div class="image1">
<img src="http://dummyimage.com/268x377/000/fff.jpg&text=image1">
</div>
<div class="image2">
<img src="http://dummyimage.com/622x377/000/fff.jpg&text=image2">
</div>
</div>
<section class="main_info">
<div class="head">
<h2>Main Info-1 h2</h2>
</div>
<div class="body">
Main info 1
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-2 h2</h2>
</div>
<div class="body">
Main info 2
</div>
</section>
<section class="main_info">
<div class="head">
<h2>Main Info-3 h2</h2>
</div>
<div class="body">
Main info 3
</div>
</section>
</main>
<aside class="sidebar">
<section class="sidebar_block">Div 1</section>
<section class="sidebar_block">Div 2</section>
<section class="sidebar_block">Div 3</section>
<section class="sidebar_block">Div 4</section>
</aside>
</div>
Regarding the questions in your comment:
Actually float works. As you use a fixed width width: 420px;, probably there has no enough space for the second ul to accommodate it in a single row. Use width: 50%; or below and see the changes. Or, you can check it in a wider screen, like, 1360px resolution.
Yes, for smaller devices.
This is a basic example. I used percentage values for the column width. So columns may become very narrower in smaller devices. To prevent that, I used min-width: 1000px for .wrapper. This will prevent narrower column width, but cause a horizontal scroll-bar in smaller devices.
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
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?
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>