It is necessary that div1 remained on the left page, and div2 - on the right. a source

html, body { height: 100%; } body { background-color: #212121; background-image: url('http://momentomori.ru/img/book2.jpg'); background-size: auto 100%; background-repeat: no-repeat; background-position: center center; } .container { height: 100%; } .div1 { width: 30%; min-height: 150px; background: #ccc; float: left; margin-left: 20%; } .div2 { width: 28%; min-height: 150px; background: #c00; margin-left: 53%; } 
 <body> <div class="container"> <div class="div1">div1</div> <div class="div2">div2</div> </div> </body>

Closed due to the fact that off-topic participants dirkgntly , aleksandr barakin , Bald , user207618, user194374 Sep 5 '16 at 10:04 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - aleksandr barakin, Bald, Community Spirit
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • set the minimum width of the min-width blocks - Dmitriy Kondratiuk

2 answers 2

Well, actually it is done

 * { margin: 0; padding: 0; } section { margin: auto; width: 70%; min-height: 400px; background: url(http://momentomori.ru/img/book.jpg); background-size: 100% 100%; } .clear, .clear:after, .clear:before { content: ""; display: block; clear: both; } aside, article { float: left; width: 50%; min-height: 500px; } .aside-block { width: 80%; min-height: 400px; margin: 20px 60px; } .article-block { width: 80%; min-height: 400px; margin: 20px; } .aside-block, .article-block { border-radius: 6px; padding: 0 10px; box-sizing: border-box; } 
 <section class="clear"> <aside> <div class="aside-block"> <h3>Lorem Ipsum</h3> <p>Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p> </div> </aside> <article> <div class="article-block"> <h3>After Hours Programming</h3> <p> <p>After Hours Programming created this application. JavaScript has the awesome power to manipulate DOM elements on the fly. Default text creates the illusion of real text. People tend to read writing. People tend to read writing. This text will not appear in a consistent order. However, standard default text can do the trick. Humans are creative beings. That is preciously how this string was constructed. It looks even better with you using this text.</p> </p> </div> </article> </section>

http://codepen.io/Geyan/pen/mAdgpZ?editors=110

  • Thank you, but then this book will not be rubber on the whole screen, as it was. It looks like min-height, you can set via jquery based on the screen resolution. - PuMi
  • You check, I checked - user33274

added this code to set min-height:

 <script> $( document ).ready(function() { height=$( window ).height()+'px'; $('section').css('min-height', height); $( window ).resize(function() { height=$( window ).height()+'px'; $('section').css('min-height', height); }); }); </script>