Adding sections on the right side

Question

So, I have a stupid question, how can I get my divs on the right side? I have the main content, but I need to set up four divs on the right side. It looks like this , and I need to add div1 - 4 . Should I add width:100%; float: leftin .main_container?

Question # 2. I would like to group main_info1 - 3 under one div as main , so that I can use all the divs .mainin css with attributes max-width: 900px; overflow: hidden; margin-left: 20px;without having to repeat, but when I do this, main_info2 jumps up and ignores the main_info1 lists . Thanks.

HTML:

<div class="main_container">
<div class="title_container">
    <h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
    <div class="block1">
        <span>Text</span>
    </div>
    <div class="block2">
        <span>Text</span>
    </div> 
</div>   
</aside>
<div class="content clearfix">
    <div class="image1">
        <img src="img/img1.jpg">
    </div>
    <div class="image2">
        <img src="img/img2.jpg">
    </div>
</div>
<div class="main_info">
    <h2>Title</h2>
    <p>Text</p>
</div>
<div class="main_info2 clearfix">
    <h2>Title</h2>
    <ul>
    <li>
    <p>Text</p>
    </li>
    </ul>
</div>
<div class="main_info3 clearfix">
    <h2>Title</h2>
    <p>Text</p>
</div>
</div>

CSS

.main_container {
  width: 1360px;
  margin: 0 auto;
  background: url("../img/bg.jpg") left top no-repeat;
  background-color: #0c0334;
}

.title_container {
  display: table;

}

.title_container h1 {
  float: left;
  display: table-cell;
  vertical-align: top;
  margin-top: 50px;
  margin-left: 20px;
  line-height: 66px;

}

.small_blocks {
  min-width: 900px;
  overflow: hidden;
}

.small_blocks div {
  height: 55px;
  margin-top: 30px;
}

.small_blocks .block1 {
  float: left;
  margin-left: 20px;
  background: #390b5d;
  width: 595px;
  line-height: 52px;
}   

.small_blocks .block1 span {
  font-size: 30px;
  padding-left: 20px;
  font-weight: 100;
}

.small_blocks .block2 {
  float: left;
  width: 285px;
  background: #e26c34;
  padding-left: 20px;
  line-height: 52px;
  vertical-align: middle;
}

.small_blocks .block2 span {
  font-size: 30px;
  padding-left: 10px;
  font-weight: 100;
  vertical-align: middle;
  display: inline-block;
}

.clearfix:after { 
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.content {
  width: 900px;
  height: 377px;
  overflow: hidden;
  margin: 20px 0 0 20px;
}

.content .image1 {
  float: left;
  width: 268px;
}

.content .image2 {
  float: left;
  margin-left: 10px;
  width:100%;
  max-width: 622px;
}

.main_info {
  max-width: 900px;
  overflow: hidden;
  margin-top: 60px;
  margin-left: 20px;  
}

.main_info h2 {
  height: 34px;
  border-bottom: 1px solid #390b5d;
}

.main_info2  {
  max-width: 900px;
  overflow: hidden;
  margin: 60px 0px 0px 20px;
  background: #110321;
}   

.main_info2 h2 {
  background: #390b5d;
  min-height: 55px;
  width: 880px;
  padding-left: 20px;
  height: 34px;
  color: #fff;
  line-height: 52px;
}

.main_info3  {
  max-width: 900px;
  overflow: hidden;
  margin: 60px 0px 0px 20px;
  background: #390b5d;
}   

.main_info3 h2 {
  min-height: 55px;
  width: 880px;
  padding-left: 20px;
  height: 34px;
  color: #fff;
  line-height: 52px;
}

Answer 1

, . HTML CSS.:)

, . , . , .

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  display: block;
}
.clearfix:after {
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.wrapper {
  min-width: 1000px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}
.title_container {
  padding-top: 50px 0 30px;
}
.title_container h1 {
  line-height: 66px;
}
.small_blocks {
  height: 55px;
  overflow: hidden;
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: 100;
  line-height: 52px;
  color: #fff;
}
.small_blocks > div {
  height: inherit;
  float: left;
  padding-left: 20px;
}
.small_blocks .block1 {
  background: #390b5d;
  width: 66.111111%;
}
.small_blocks .block2 {
  width: 33.888889%;
  background: #e26c34;
}
.content {
  /*height: 377px;*/
  overflow: hidden;
  margin-bottom: 60px;
}
.content > div img {
  width: 100%;
  height: auto;
}
.content .image1 {
  float: left;
  width: 29.777778%;
}
.content .image2 {
  float: left;
  width: 70.222222%;
  padding-left: 10px;
}
.main_container {
  width: 68.181818%;
  float: left;
}
.main_info {
  margin-bottom: 60px;
  background: #d7d7d7;
}
.main_info .head {
  padding-left: 20px;
  background: #000;
  color: #fff;
}
.main_info h2 {
  height: 34px;
  line-height: 34px;
}
.main_info .body {
  padding: 20px;
}
.sidebar {
  width: 31.818182%;
  padding-left: 20px;
  float: right;
}
.sidebar_block {
  min-height: 150px;
  margin-bottom: 20px;
  padding: 20px;
  background: #000;
  color: #fff;
}

<div class="wrapper">
  <header class="title_container">
    <h1>Title</h1>
  </header>
  <main class="main_container">
    <div class="small_blocks">
      <div class="block1">
        <span>Block 1</span>
      </div>
      <div class="block2">
        <span>Block 2</span>
      </div>
    </div>
    <div class="content clearfix">
      <div class="image1">
        <img src="http://dummyimage.com/268x377/000/fff.jpg&text=image1">
      </div>
      <div class="image2">
        <img src="http://dummyimage.com/622x377/000/fff.jpg&text=image2">
      </div>
    </div>
    <section class="main_info">
      <div class="head">
        <h2>Main Info-1 h2</h2>
      </div>
      <div class="body">
        Main info 1
      </div>
    </section>
    <section class="main_info">
      <div class="head">
        <h2>Main Info-2 h2</h2>
      </div>
      <div class="body">
        Main info 2
      </div>
    </section>
    <section class="main_info">
      <div class="head">
        <h2>Main Info-3 h2</h2>
      </div>
      <div class="body">
        Main info 3
      </div>
    </section>
  </main>
  <aside class="sidebar">
    <section class="sidebar_block">Div 1</section>
    <section class="sidebar_block">Div 2</section>
    <section class="sidebar_block">Div 3</section>
    <section class="sidebar_block">Div 4</section>
  </aside>
</div>

Hide result

---

:

• float . width: 420px;, , ul, . width: 50%; . , , 1360 .
• , .
  . . , . , min-width: 1000px .wrapper. , .