Geek Answers Handbook

CSS, Responsive, Compose floating blocks up

I want to create a responsive layout where there are two columns left and right. On smaller screens, the fields on the left should move to specific positions. This works fine with my code, but the problem is there is a space between the boxes on large screens.

How can I solve it?

Idea and problem

enter image description here

JSFIDDLE

When you look at the next jsfiddle, you see that it works on a small screen, but problems do not move on the big screen. I know how I do it wrong, but how can I get this desired result using CSS?

http://jsfiddle.net/7rnum9xk/

.main{ width:65%; height:125px; margin-bottom:10px; float:left; } .small{ width:35%; height:25px; float:left; margin-bottom:5px; } @media screen and (max-width: 692px) { .main, .small{ width:100%; float:none; } }
+8
html css css3 responsive-design
source share
2 answers

try this demo code

 .main{ width:65%; height:125px; margin-bottom:10px; float:left; display: inline-block; } .small{ width:35%; height:25px; /* float:left; */ display:inline-block; margin-bottom:5px; } @media screen and (max-width: 692px) { .main, .small{ width:100%; float:none; } } /* colors */ .main{background:#d0d0d0;} .orange{background:#ecbd00;} .green{background:#6aec00;} .blue{background:#00c8ec;} .purple{background:#c300ec;} .red{background:#e93a73;}
+12
source share

The problem is the html structure, you put the main div after each in small divs. So, he is going to print this div first.

What I propose to do is change the structure of the html, for example:

put the left column to the left and the right column to the right.

Then put around the div around

add media css so that at 800px (or whatever you need) you can display none; on .hide800 , this hides the div and then adds a div around your current html, but inserts a built-in none display style. Then at 800px (or any other size you hide the first div) add css to display: block !Important;

This way it will work as you need for full-size browsers, but when the screen is small enough to change the structure, you can use your current code.

HTML

 <div class="hide800"> <div class="left-col"> <div class="main"> </div> <div class="main"> </div> <div class="main"> </div> </div> <div class-right-col"> <div class="small orange"> </div> <div class="small green"> </div> <div class="small blue"> </div> <div class="small purple"> </div> <div class="small red"> </div> </div> </div> <div class="show800" style="display:none;"> <div class="main"> </div> <div class="small orange"> </div> <div class="small green"> </div> <div class="main"> </div> <div class="small blue"> </div> <div class="small purple"> </div> <div class="main"> </div> <div class="small red"> </div> </div>

CSS

 .left-col { float: left; } .right-col { float: right; } @media screen and(max-width:800px){ .hide800 { display: none; } .show800 { display: block !Important; } }

If you need me to explain further, let me know :)

-one
source share

More articles:


All Articles