I want to do something like an area with a directory of posts, but the divs are either displayed one under the other, or if you specify the display: inline-block property, they are unevenly located relative to each other

enter image description here


and with the float: left block parameter, the wrapper with all its elements does not go further than the middle.
Can you please tell me how to make normal output of blocks without suffering?

enter image description here

Code:

* { margin:0px; padding:0px; } body { background:grey; font-family: Roboto, Arial; font-size: 11pt; } #top { height:95px; background:#152e46; box-shadow: 0 0 20px rgba(0,0,0,0.5); } #wrapper { width:100%; background:url(../images/bg.png) repeat; margin:-4px 0 0 0; } .content { width:960px; margin:0px auto; } #header { padding:35px 0px 35px 0px; color:#fff; } #container { width:645px; } #container img{ padding:0px 15px 15px 0px; } .sidebar { width:314px; float:right; padding:0px 0 0 0px; } .sidebar img{ margin:0px 7px 15px 0px; } .sidebar img.noright{ margin-right:0px; } #footer .sidebar img{ width:140px; height:141px; } #footer { background:#1c1c1c; clear:both; margin: 0; } #footer .content { padding:15px 0 40px 0; background:#1c1c1c; } h6 { display:inline-block; padding:17px 0; font-family:"Roboto"; } h6 a{ margin:0px 25px 0px 0px; color:#cbe4ec; font-size:18px; text-decoration:none; } h6 a:hover{ text-decoration:underline; } #insidetop { margin:0 auto; width:950px; } .copyright { font-size:11px; color:#bfbfbf; float:left; text-transform:uppercase; margin:10px 0 10px 0; } #wrapper .content { padding: 20px; } .info { width: 623px; background: white; margin-bottom: 15px; padding-bottom: 15px; box-shadow: 0 0 2px rgba(0,0,0,0.4); border-radius: 4px; } .logo { background: url(../images/logo.jpg); margin: 5px; float: left; width: 80px; height: 80px; } .box { } .one-item { display: inline-block; background: white; margin: 20px 18px 0 0; width: 300px; height: 400px; border-radius: 4px; box-shadow: 0 0 2px rgba(0,0,0,0.4); } .one-item img { width: 100%; } .sidebar-item { width: 290px; height: 140px; margin-bottom: 20px; background: white; box-shadow: 0 0 2px rgba(0,0,0,0.4); border-radius: 4px; } .description { margin: 15px 10px 0 10px; } /*---------top-menu------------*/ .top-menu { float: right; padding-top: 15px; margin: 10px 18px 0 0; } .clear { clear: both; } .navigation { margin-right: 10px; list-style: none; padding: 0; margin: 0; background: #21486d; border-radius: 5px; font-size: 18px; /* box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 1); */ } .navigation li { float: left; } .navigation li:hover { background: #222; } .navigation li:first-child { -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 0 0 5px; } .navigation li a { display: block; padding: 0 20px; text-decoration: none; line-height: 40px; color: #fff; } .navigation ul { display: none; position: absolute; list-style: none; margin-left: -3px; padding: 0; overflow: hidden; font-size: 16px; } .navigation ul li { float: none; } .navigation li:hover > ul { display: block; background: #222; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); } .navigation li:hover > ul li:hover { -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .navigation li li a:hover { background: #000; } .navigation ul li:last-child a, .navigation ul li:last-child a:hover { -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /*---------top-menu------------*/ 
 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Kursa4</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/slider.css"> </head> <body> <div id="top"> <div id="insidetop"> <div class="logo"></div> <!-------TOP-MENU---------> <div class="top-menu"> <ul class="navigation"> <li><a href="" title="Home">Home</a></li> <li><a href="" title="About us">About us</a></li> <li><a href="" title="Portfolio">Portfolio</a> <ul> <li><a href="" title="Websites">Websites</a></li> <li><a href="" title="Webshops">Webshops</a></li> <li><a href="" title="SEO">SEO</a></li> <li><a href="" title="Responsive webdesign">Responsive webdesign</a></li> </ul> </li> <li><a href="" title="Contact">Contact</a></li> <div class="clear"></div> </ul> </div> <!-------TOP-MENU---------> </div> </div><!-- top --> <div id="wrapper"> <div class="content"> <!-------SIDEBAR---------> <div class="sidebar"> <div class="sidebar-item"></div> <div class="sidebar-item"></div> </div> <!-------SIDEBAR---------> <div id="container"> <div class="info"> <div style="margin:0;padding:0;"> <div class="slides"> <ul> <!-- Слайды --> <li><img src="images/slider1.jpg" alt="image01" /></li> <li><img src="images/slider2.jpg" alt="image02" /></li> <li><img src="images/slider3.jpg" alt="image03" /></li> <li><img src="images/slider4.jpg" alt="image04" /></li> </ul> </div> </div> <div class="description"> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> </div> </div> <div class="box"> <div class="one-item"> <img src="images/one-item.jpg"> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <div class="item-bottom"></div> </div> <div class="one-item"> <img src="images/one-item.jpg"> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <div class="item-bottom"></div> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> </div> </div><!--container--> </div><!--content--> </div><!--wrapper--> <div id="footer"> <div class="content"> <a href="#"><span class="copyright">copyright 2016 Ivan K</span></a> </div><!--content--> </div><!--footer--> </body> </html> dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd </ p> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Kursa4</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/slider.css"> </head> <body> <div id="top"> <div id="insidetop"> <div class="logo"></div> <!-------TOP-MENU---------> <div class="top-menu"> <ul class="navigation"> <li><a href="" title="Home">Home</a></li> <li><a href="" title="About us">About us</a></li> <li><a href="" title="Portfolio">Portfolio</a> <ul> <li><a href="" title="Websites">Websites</a></li> <li><a href="" title="Webshops">Webshops</a></li> <li><a href="" title="SEO">SEO</a></li> <li><a href="" title="Responsive webdesign">Responsive webdesign</a></li> </ul> </li> <li><a href="" title="Contact">Contact</a></li> <div class="clear"></div> </ul> </div> <!-------TOP-MENU---------> </div> </div><!-- top --> <div id="wrapper"> <div class="content"> <!-------SIDEBAR---------> <div class="sidebar"> <div class="sidebar-item"></div> <div class="sidebar-item"></div> </div> <!-------SIDEBAR---------> <div id="container"> <div class="info"> <div style="margin:0;padding:0;"> <div class="slides"> <ul> <!-- Слайды --> <li><img src="images/slider1.jpg" alt="image01" /></li> <li><img src="images/slider2.jpg" alt="image02" /></li> <li><img src="images/slider3.jpg" alt="image03" /></li> <li><img src="images/slider4.jpg" alt="image04" /></li> </ul> </div> </div> <div class="description"> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> </div> </div> <div class="box"> <div class="one-item"> <img src="images/one-item.jpg"> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <div class="item-bottom"></div> </div> <div class="one-item"> <img src="images/one-item.jpg"> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <div class="item-bottom"></div> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> </div> </div><!--container--> </div><!--content--> </div><!--wrapper--> <div id="footer"> <div class="content"> <a href="#"><span class="copyright">copyright 2016 Ivan K</span></a> </div><!--content--> </div><!--footer--> </body> </html> dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd </ p> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Kursa4</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/slider.css"> </head> <body> <div id="top"> <div id="insidetop"> <div class="logo"></div> <!-------TOP-MENU---------> <div class="top-menu"> <ul class="navigation"> <li><a href="" title="Home">Home</a></li> <li><a href="" title="About us">About us</a></li> <li><a href="" title="Portfolio">Portfolio</a> <ul> <li><a href="" title="Websites">Websites</a></li> <li><a href="" title="Webshops">Webshops</a></li> <li><a href="" title="SEO">SEO</a></li> <li><a href="" title="Responsive webdesign">Responsive webdesign</a></li> </ul> </li> <li><a href="" title="Contact">Contact</a></li> <div class="clear"></div> </ul> </div> <!-------TOP-MENU---------> </div> </div><!-- top --> <div id="wrapper"> <div class="content"> <!-------SIDEBAR---------> <div class="sidebar"> <div class="sidebar-item"></div> <div class="sidebar-item"></div> </div> <!-------SIDEBAR---------> <div id="container"> <div class="info"> <div style="margin:0;padding:0;"> <div class="slides"> <ul> <!-- Слайды --> <li><img src="images/slider1.jpg" alt="image01" /></li> <li><img src="images/slider2.jpg" alt="image02" /></li> <li><img src="images/slider3.jpg" alt="image03" /></li> <li><img src="images/slider4.jpg" alt="image04" /></li> </ul> </div> </div> <div class="description"> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> </div> </div> <div class="box"> <div class="one-item"> <img src="images/one-item.jpg"> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <div class="item-bottom"></div> </div> <div class="one-item"> <img src="images/one-item.jpg"> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p> <div class="item-bottom"></div> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> <div class="one-item"> <img src="images/one-item.jpg"> </div> </div> </div><!--container--> </div><!--content--> </div><!--wrapper--> <div id="footer"> <div class="content"> <a href="#"><span class="copyright">copyright 2016 Ivan K</span></a> </div><!--content--> </div><!--footer--> </body> </html>

  • I have recently used flexbox for such classes, it is very easy to learn and the result is what you need, the only thing you need to consider is cross - browser compatibility - Taras M.

2 answers 2

So-so solution, but try in your case:

 .one-item { display: inline-table; ... }

Better, of course, you read about the grid layout.

    Maybe so ??

     * { margin: 0; padding: 0; } .main { width: 80%; margin: 10px auto; } .post:first-child, .post:last-child { width: 100%; min-height: 260px; border: 3px double #f2f2f2; border-radius: 10px; } .post:first-child img, .post:last-child img { display: block; width: 100%; max-height: 150px; } .post:first-child p { width: 95%; margin: auto; color: #666; } .post { width: 49%; float: left; max-height: 396px; overflow: hidden; border: 4px double #f9f9f9; box-sizing: border-box; margin: 1% .5%; border-radius: 10px; } .post img { display: block; width: 100%; } .post { box-sizing: border-box; overflow-Y: auto; border: none !important; } 
     <div class="main"> <div class="post"> <img src="http://placehold.it/350x150" alt=""> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p> </div> <div class="post"> <img src="http://placehold.it/200x70" alt=""> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p> </div> <div class="post"> <img src="http://placehold.it/200x70" alt=""> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p> </div> <div class="post"> <img src="http://placehold.it/200x70" alt=""> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p> </div> <div class="post"> <img src="http://placehold.it/200x70" alt=""> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p> </div> <div class="post"> <img src="http://placehold.it/200x70" alt=""> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p> </div> <div class="post"> <img src="http://placehold.it/350x150" alt=""> <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p> </div> </div>

    • The background still somehow moves up, and the posts remain on a gray background yadi.sk/i/ODrYbysr33QBe6 - enkelad
    • of course .... I did as an example without a 100% result. If you want a result, throw off at least the layout of what should work - user33274