Хочу сделать что-то вроде области с каталогом постов, но div'ы либо выводятся друг под другом, либо если указать свойство display: inline-block они расположены неровно по отношению друг к другу
а при параметре блока float:left враппер со всеми своими элементами вообще дальше середины не идет.
Подскажите пожалуйста как без мучений сделать нормальный вывод блоков?
Код:
* {
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>