Правый блок уходит вниз (float)

@Serejka-Zloy · Регистрация: 21.01.2016

Author24 — интернет-сервис помощи студентам

Добрый вечер, хочу сделать 3 блока, которые находятся на одном уровне, но правый блок уходит вниз (Может посоветуйте альтернативу? Или, пожалуйста, объясните, в чем проблема?):
Код (онлайн редактор): https://jsfiddle.net/w58monyd/
Код:

HTML5

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Sergey</title>
</head>
 
<body>
<div id="top_div">
    
</div>
<div id="content">
    <div id="left_div">
 
        <div id="reg_div">
            
        </div>
        <div id="sch_div">
            
        </div>
    </div>
 
    <div id="main_div">
        <div id="sw_div">
            
        </div>
    </div>
 
    <div id="right_div">
        
    </div>
</div>
 
<div id="bottom_div">
    
</div>
</body>
 
 
</html>

CSS

body{
    margin:auto;
    padding:0;
    width: 1000px;
    /*background: ;: url(image/background.jpg) no-repeat;*/
    background-color: #000;
    background-size: 100%;
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
 
#top_div{
    width: 100%;
    height: 100px;
    background: #fff;
}
 
#content{
    overflow: hidden;
}
 
#left_div{
    background: #2fe;
    float: left;
    width: 200px;
    padding: 10px;
}
 
#reg_div{
 
}
 
#sch_div{
 
}
 
#main_div{
    background: #9ef;
    margin: 0px 250px 0px 250px;
    padding: 10px;
}
 
#sw_div{
    width: 200px;
    height: 200px;
    background: #f34;
}
 
#right_div{
    background: #e2f;
    float: right;
    width: 200px;
    padding: 10px;
}
 
#bottom_div{
 
}

@iVKO · 29.02.2016, 16:37

Попробуйте второму блоку присвоить значение vertical-align:top(или middle).

@Serejka-Zloy · 29.02.2016, 16:39 **[ТС]**

iVKO, Не получилось

@francz · 29.02.2016, 16:51

может так

HTML5

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Sergey</title>
</head>
 
<body>
<div class="bl_osnova">
  <div class="container">
    <div class="bl1">1</div>
    <div class="bl2">2</div>
    <div class="bl3">3</div>
  </div>
</div>
</body>
</html>

CSS

body{
    margin:0;
    padding:0;
    width: 100%;
  min-width: 320px;
    /*background: ;: url(image/background.jpg) no-repeat;*/
    background-color: #000;
    background-size: 100%;
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  font-family: Arial, sans-serif;
  overflow: hidden;
  line-height: 1.6;
  font-size: 14px;
}
 
.bl_osnova {
  width: 100%;
  min-height: 480px;
  background-color: #fff;
}
.container {
  max-width: 1170px;
  min-width: 320px;
  margin: 0 autp;
}
.bl1 {
  width: 33%;
  min-height: 240px;
  float: left;
  display: block;
  background-color: #f36;
  line-height: 240px;
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}
.bl2 {
  width: 33%;
  min-height: 240px;
  float: left;
  display: block;
  background-color: #333;
  line-height: 240px;
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}
.bl3 {
  width: 33%;
  min-height: 240px;
  float: left;
  display: block;
  background-color: #212;
  line-height: 240px;
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}

@iVKO · 29.02.2016, 16:54

Serejka-Zloy, все верно, он у вас не убирается в дону строку со всеми блоками.
У центрального блока прописан margin: 0px 250px 0px 250px

@iVKO 24 / 24 / 13 Регистрация: 04.02.2015 Сообщений: 96
	29.02.2016, 16:37	2
	Попробуйте второму блоку присвоить значение vertical-align:top(или middle). 0

@Serejka-Zloy 0 / 0 / 0 Регистрация: 21.01.2016 Сообщений: 10
	29.02.2016, 16:39 [ТС]	3
	iVKO, Не получилось 0

@iVKO 24 / 24 / 13 Регистрация: 04.02.2015 Сообщений: 96
	29.02.2016, 16:54	5
	Serejka-Zloy, все верно, он у вас не убирается в дону строку со всеми блоками. У центрального блока прописан margin: 0px 250px 0px 250px 0

Правый блок уходит вниз (float)

Решение