Вобщем так. у меня вот такой HTML
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/main_style.css" rel="stylesheet">
<title>Магазим электронной техники</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/npm.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="clearfix">
<div class="col-lg-6 col-md-6 col-s6-6 col-xs-6">
<p>Контакты</p>
</div>
<div class="col-lg-6 col-md-6 col-s6-6 col-xs-6">
<p>Личный кабинет</p>
</div>
</div>
</div>
<div class="row">
<div class="clearfix">
<div class="col-lg-4 col-md-4 col-s6-4 col-xs-4">
<p>Логотип</p>
</div>
<div class="col-lg-4 col-md-4 col-s6-4 col-xs-4">
<p>Поиск</p>
</div>
<div class="col-lg-4 col-md-4 col-s6-4 col-xs-4">
<p>Корзина</p>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="clearfix">
<div class="col-lg-6 col-md-6 col-s6-6 col-xs-6 catalog">
<aside>
<p>Меню</p>
<ul>
<li>Товар №1</li>
<li>Товар №2</li>
<li>Товар №3</li>
<li>Товар №4</li>
<li>Товар №5</li>
<li>Товар №6</li>
</ul>
</aside>
</div>
<div class="row">
<div class="clearfix">
<div class="col-lg-6 col-md-6 col-xs-6 col-xs-6 mainmenu">
<nav>
<ul>
<li>Акции</li>
<li>Способы оплаты и доставки</li>
<li>О нас</li>
</ul>
</nav>
</div>
<div class="row">
<div class="clearfix">
<div class="col-lg-6 col-md-6 col-s6-6 col-xs-6 slider">
<section>
<p>Слайдер</p>
<p>Наши приемущества</p>
</section>
</div>
<div class="col-lg-6 col-md-6 col-s6-6 col-xs-6 special">
<section>
<p>Спецпредложения</p>
<p>Счетчик времени</p>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<article>
<div class="container">
<div class="row">
<div class="clearfix">
<div class="col-lg-3 col-md-4 col-s6-6 col-xs-6 ">
<h4>Товар №1</h4>
</div>
<div class="col-lg-3 col-md-4 col-s6-6 col-xs-6 ">
<h4>Товар №2</h4>
</div>
<div class="col-lg-3 col-md-4 col-s6-6 col-xs-6 ">
<h4>Товар №3</h4>
</div>
<div class="col-lg-3 col-md-3 col-s6-6 col-xs-6 ">
<h4>Товар №4</h4>
</div>
</div>
</div>
<div class="row">
<div class="clearfix">
<div class="col-lg-3 col-md-4 col-s6-6 col-xs-6 ">
<h4>Товар №5</h4>
</div>
<div class="col-lg-3 col-md-4 col-s6-6 col-xs-6 ">
<h4>Товар №6</h4>
</div>
<div class="col-lg-3 col-md-4 col-s6-6 col-xs-6 ">
<h4>Товар №7</h4>
</div>
<div class="col-lg-3 col-md-3 col-s6-6 col-xs-6 ">
<h4>Товар №8</h4>
</div>
</div>
</div>
</div>
</article>
</body>
</html>
и такой css
body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
.row {
margin: 0;
padding: 0;
}
.col-lg-6, .col-lg-4 {
margin: 0;
padding: 0;
}
.catalog {
border: 1px solid red;
width: 20%;
}
.mainmenu {
border: 1px solid yellow;
width: 80%;
}
.slider {
border: 1px solid green;
width: 60%;
}
.special {
border: 1px solid green;
width: 20%;
}
ul {
list-style: none;
}
nav ul li {
display: inline;
}
aside{
width: 100%;
margin: 0;
padding: 0;
}
nav{
width: 100%;
margin: 0;
padding: 0;
}
section{
width: 100%;
margin: 0;
padding: 0;
}
.col-lg-3, .col-md-3 {
border: 1px solid black;
}
Так вот дивы с зелеными поля должны доходить до border-bottom красного поля.
Там из кода видно что идет одна строка с разбивкой на две колонки, и во второй колонке идет опять разделение по строкам (это для тех кто не знаком с bootstrap)
