Three columns to match layout with top div in the center on large screens
I am trying to create a responsive layout that has three largest columns. On a mobile device, everything will stack on top of each other:
The larger view will have two columns. I would like the first div to be in the second column:
On the largest screen, the last div will be in the third column and at the very top:
I've put together some code to demonstrate what I have, but I can't seem to get the last div to hit the top on the largest screen.
http://codepen.io/mikes000/pen/ceDEi
I'm trying to avoid using flexbox or anything that doesn't work in IE9. Also avoid absolute or relative positioning to click the last checkbox because the length of the content for each area will change from page to page and I don't want to run into overflow issues.
Any suggestions?
HTML:
<div class="main">
<div class="breadcrumbs">
asdf / asdf / asdf asdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdfasdf / asdf / asdf
</div>
<div class="left-sidebar">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<h2>Pellentesque habitant morbi</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div class="main-content">
<div class="content-wrap">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div class="right-sidebar">
<h2>morbi tristique</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
</div>
CSS
.main{
width:100%;
max-width:1000px;
margin:auto;
@media (min-width:400px) {
.breadcrumbs{
float:right;
width:80%;
}
.left-sidebar{
float:left;
width:20%;
}
.main-content{
width:80%;
float:right;
}
}
@media (min-width:700px) {
.breadcrumbs{
float:right;
width:60%;
margin-right:20%;
}
.main-content{
width:100%;
float:none;
}
.main-content{
width:60%;
float:left
}
.right-sidebar{
width:20%;
float:left;
}
}
}
.breadcrumbs{
background-color:#FF9D5E;
}
.left-sidebar{
background-color:#CEE7EA;
}
.main-content{
background-color:#94BC6C;
}
.right-sidebar{
background-color:#FEA9A1;
}
source to share
Your order of exchanging the 1st and 2nd blocks, and your 4th block goes to the third position. Therefore, in principle, you cannot use a typical responsive design. However, the problem can be solved by duplicating the orange and red fields. If you are using a templating system it is actually quite simple.
think about it like this:
block 1- orange1
block 2- blue
block 3- orange2
block 4- red1
block 5- green
block 6- red2
My suggestion was to redesign the page to work with browser thread. But if this is the design you give, then here is one way to approach it:
Your html will look something like this (assuming html5)
<nav class="orange1"></nav>
<section class="blue"></section>
<aside class="red1"></aside>
<nav class="orange2"></nav>
<section class="green"></section>
<aside class="red2"></aside>
Your css will look something like this ...
.orange1,.red2 {
display:none;
}
.blue {
float:left;
width:200px;
}
.red1 {
float:right;
width:200px;
}
.orange2,.red2 {
width:100%;
}
@media (max-width:700px;) {
.red1 {
display:none;
}
.red2 {
display:block;
}
}
@media (max-width:400px;) {
.orange1 {
display:block;
}
.orange2 {
display:none;
}
.blue {
float:none;
width:100%;
}
}
Give or take some bugs, this code is for reference only.
source to share
Have you tried using twitter bootstrap? It has its own responsive api that allows you to do this kind of thing without much coding on your part. plus it works for IE9 and other browsers alike. This will help you create responsive sites for three predefined screen sizes that you can override as you wish in your css file. You can get the bootloader from the following site: http://getbootstrap.com/
source to share