0

Всем привет!

Объясните, пожалуйста, почему правый блок съезжает вниз?

Правый блок съезжает вниз

body
{
  background:url(http://www.pixeden.com/media/k2/galleries/165/002-subtle-light-pattern-background-texture-vol5.jpg) repeat;
}


.wrap
{
  background: #333;
  width: 1000px;
  margin: auto;
}

.clear
{
  clear: both;
}

header
{
  background: #000;
}


.logo
{
  margin-left: 19px;
  margin-top: 30px;
  margin-bottom: 19px;
  width: 366px;
  height: 59px;
  float: left;
}

.some_text_in_header
{
  width: 404px;
  height: 40px;
  margin-right: 19px;
  margin-top: 39px;
  margin-bottom: 29px;
  color: #595959;
  text-align: right;
  float: right;
  font-family: Georgia;
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
}
.top_menu
{
  background-color: #282828;
  width: 960px;
  height: 46px;
  margin: auto;
  text-align: center;
  border-radius: 10px 10px 0 0;
}

.top_menu ul li
{
  display: inline-block;
  margin-top: 19px;
  margin-right: 31px;
}

.top_menu ul li a
{
  color: #ccc;
  font-family: Georgia;
  text-decoration: none;
  text-transform: uppercase;
}

.top_menu ul li a:hover
{
  color: yellow;
}

main
{
  background-color: #282828;
  border-top: 1px solid #3d3d3d;
  border-bottom: 1px solid #3d3d3d;
}

.some_content
{
  float: left;
  width: 680px;
  height: 358px;
  background-color: #171717;
  margin: 26px 0px 0px 20px;
}

.some_content_block
{
  display: block;
  float: left;
  width: 280px;
  height: 113px;
  margin: 31px 27px 39px 31px;


}

.some_content_block img, h3, p
{
  display: inline-block;
}

.some_content_block h3
{
  color: #4a4a4a;
  font-family: Georgia;
  font-size: 22px;
  font-weight: 400;
  line-height: 26px;
}

.some_content_block p
{
  color: #999;
  font-family: Georgia;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.first_some_img_block
{
  float: left;
  width: 680px;
  height: 150px;
  margin: 22px 0px 26px 20px;
  line-height:0
}

.first_some_img_block img
{
  border:solid 10px #171717;
  display: block;
  float: left;
  margin-right: 10px;
}

.first_some_img_block img:last-child
{
  margin-right: 0px;
}

.second_some_img_blok
{ 
  background: #aaa;
  margin-top: 26px;
  float: right;
  width: 260px;
  height: 530px;
}

.second_some_img_blok_big_pic
{
  display: block;
  float: left;
}
.second_some_img_blok_small_pic
{
  display: block;
  float: left;
}
<!DOCTYPE html>
<html>
  <head>
    <title>WEB TEAM template</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <!-- wrap begin -->
    <div class="wrap">
    <!-- HEADER THERE -->
    <header>
      <div class="top">
        <div class="logo">
          <a href="#"><img src="http://cdn.shopify.com/s/files/1/0307/4837/t/2/assets/logo.png" alt="logo"></a>
        </div>

        <div class="some_text_in_header">
          <p>
            Nullanibh quis sed in auctor sit aenean vivamus
  hendrerit purus nequam. Pulvinarat ligula sed eger.
          </p>
        </div>
        <div class="clear"></div>
      </div>
        <nav class="top_menu">
          <ul>
            <li><a href="#">homepage</a></li>
            <li><a href="#">style demo</a></li>
            <li><a href="#">full width</a></li>
            <li><a href="#">dropdown</a></li>
            <li><a href="#">link text</a></li>
          </ul>
        </nav>
    </header>
    <!--MAIN CONTENT THERE -->
    <main>
      <div class="some_content">
        <div class="some_content_block">
            <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="" class="content_img">
            <h3 class="content_title">lorum ipsum dolor</h3>
            <p class="content_text">Orciinterdum condimenterdum nullamcorper
  elit nam curabitur laoreet met praesenean et iac
  ulum. Metridiculis conseque quis iaculum aen
  ean nunc aenean quis nam nis dui.</p>
          </div>
          <div class="some_content_block">
            <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="" class="content_img">
            <h3 class="content_title">lorum ipsum dolor</h3>
            <p class="content_text">Orciinterdum condimenterdum nullamcorper
  elit nam curabitur laoreet met praesenean et iac
  ulum. Metridiculis conseque quis iaculum aen
  ean nunc aenean quis nam nis dui.</p>
          </div>
          <div class="some_content_block">
            <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="" class="content_img">
            <h3 class="content_title">lorum ipsum dolor</h3>
            <p class="content_text">Orciinterdum condimenterdum nullamcorper
  elit nam curabitur laoreet met praesenean et iac
  ulum. Metridiculis conseque quis iaculum aen
  ean nunc aenean quis nam nis dui.</p>
          </div>
          <div class="some_content_block">
            <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="" class="content_img">
            <h3 class="content_title">lorum ipsum dolor</h3>
            <p class="content_text">Orciinterdum condimenterdum nullamcorper
  elit nam curabitur laoreet met praesenean et iac
  ulum. Metridiculis conseque quis iaculum aen
  ean nunc aenean quis nam nis dui.</p>
          </div>
      </div>

        <div class="first_some_img_block">
          <img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt="" class="first_some_img_block_pic">
          <img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt="" class="first_some_img_block_pic">
          <img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt="" class="first_some_img_block_pic">

        </div>
        <div class="second_some_img_blok">
          <img src="http://orig11.deviantart.net/1b04/f/2012/278/0/4/random_bg_by_pagodapeak-d5gwipc.png" alt="" class="second_some_img_blok_big_pic">
          <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="" class="second_some_img_blok_small_pic">
          <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="" class="second_some_img_blok_small_pic">
          <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="" class="second_some_img_blok_small_pic">
          <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="" class="second_some_img_blok_small_pic">
        </div>
      <div class="clear"></div>

    </main>
    <!-- FOOTER THERE -->
    <footer>
      <div class="go_the_top">
        <a href="#" class="go_the_top_arrow_link"></a>
        <a href="#" class="go_the_top_text_link">want go the top?</a>
      </div>
      <div class="usr_feedback">
        <form action=""></form>
        <label for="usr_name">Name:</label>
        <input name="usr_name" type="text">
        <label for="usr_email">Email:</label>
        <input name="usr_email" type="text">
        <label for="usr_message">Message:</label>
        <textarea name="usr_massage" form="usr_feedback"></textarea>
        <button type="button" name="usr_feedback_submit">Submit</button>
        <button type="button" name="usr_feedback_reset">Reset</button>
      </div>
      <div class="latest">
        <h4 class="footer_label">Latest From The Blog</h4>
        <hr>
        <a href="#" class="latest_link">Link 1</a>
        <a href="#" class="latest_link">Link 2</a>
        <a href="#" class="latest_link">Link 3</a>
        <a href="#" class="latest_link">Link 4</a>
      </div>
      <div class="social_buttons">
        <h4 class="footer_label">Keep in touch</h4>
        <hr>
        <div class="social_buttons">
          <img src="https://dgryagaiw0chj.cloudfront.net/sites/all/themes/shared/jcore_oup/images/facebook.svg" alt="follow us on Facebook" class="social_icon">
          <a href="#" class="social_link">Facebook</a></div>
        <div class="social_buttons">
          <img src="https://www.microsoft.com/en-xm/outlook-com/img/footer-icon-twitter.svg" alt="follow us on Twitter" class="social_icon">
          <a href="#" class="social_link">Twitter</a></div>
        <div class="social_buttons">
          <img src="http://orig09.deviantart.net/316b/f/2013/190/d/7/deviantart_by_tanathe-d6co5mn.png" alt="see us on Deviant Art" class="social_icon">
          <a href="#" class="social_link">Deviant Art</a>
        </div>
      </div>
      <hr>
      <p class="copyright">Copyright © 2013 Domain Name - All Rights Reserved</p>
      <p class="template_by">Template by OS Templates</p>
    </footer>
    </div>
    <!-- end wrap -->

  </body>
</html>

2 ответа 2

1

Думаю Вам стоит почитать про свойство float Подробно о свойстве float
Все просто синий блок не помещается в свободное пространство и опускается на следующую строку, оранжевый блок как и положено идет следом за синим и занимает свое законное место.
Для решения используйте либо float: right для оранжевого, либо поменяйте их местами в html

1
  • Спасибо! Теперь все понятно.
    – ovrd0se
    20 апр 2016 в 15:18
0

Поменяйте местами синий и оранжевый блоки, ибо выравнивание высоты происходит, так сказать, по соседнему блоку слева.

body
{
  background:url(http://www.pixeden.com/media/k2/galleries/165/002-subtle-light-pattern-background-texture-vol5.jpg) repeat;
}


.wrap
{
  background: #333;
  width: 1000px;
  margin: auto;
}

.clear
{
  clear: both;
}

header
{
  background: #000;
}


.logo
{
  margin-left: 19px;
  margin-top: 30px;
  margin-bottom: 19px;
  width: 366px;
  height: 59px;
  float: left;
}

.some_text_in_header
{
  width: 404px;
  height: 40px;
  margin-right: 19px;
  margin-top: 39px;
  margin-bottom: 29px;
  color: #595959;
  text-align: right;
  float: right;
  font-family: Georgia;
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
}
.top_menu
{
  background-color: #282828;
  width: 960px;
  height: 46px;
  margin: auto;
  text-align: center;
  border-radius: 10px 10px 0 0;
}

.top_menu ul li
{
  display: inline-block;
  margin-top: 19px;
  margin-right: 31px;
}

.top_menu ul li a
{
  color: #ccc;
  font-family: Georgia;
  text-decoration: none;
  text-transform: uppercase;
}

.top_menu ul li a:hover
{
  color: yellow;
}

main
{
  background-color: #282828;
  border-top: 1px solid #3d3d3d;
  border-bottom: 1px solid #3d3d3d;
}

.some_content
{
  float: left;
  width: 680px;
  height: 358px;
  background-color: #171717;
  margin: 26px 0px 0px 20px;
}

.some_content_block
{
  display: block;
  float: left;
  width: 280px;
  height: 113px;
  margin: 31px 27px 39px 31px;


}

.some_content_block img, h3, p
{
  display: inline-block;
}

.some_content_block h3
{
  color: #4a4a4a;
  font-family: Georgia;
  font-size: 22px;
  font-weight: 400;
  line-height: 26px;
}

.some_content_block p
{
  color: #999;
  font-family: Georgia;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.first_some_img_block
{
  float: left;
  width: 680px;
  height: 150px;
  margin: 22px 0px 26px 20px;
  line-height:0
}

.first_some_img_block img
{
  border:solid 10px #171717;
  display: block;
  float: left;
  margin-right: 10px;
}

.first_some_img_block img:last-child
{
  margin-right: 0px;
}

.second_some_img_blok
{ 
  background: #aaa;
  margin-top: 26px;
  float: right;
  width: 260px;
  height: 530px;
}

.second_some_img_blok_big_pic
{
  display: block;
  float: left;
}
.second_some_img_blok_small_pic
{
  display: block;
  float: left;
}
<!DOCTYPE html>
<html>
  <head>
    <title>WEB TEAM template</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <!-- wrap begin -->
    <div class="wrap">
    <!-- HEADER THERE -->
    <header>
      <div class="top">
        <div class="logo">
          <a href="#"><img src="http://cdn.shopify.com/s/files/1/0307/4837/t/2/assets/logo.png" alt="logo"></a>
        </div>

        <div class="some_text_in_header">
          <p>
            Nullanibh quis sed in auctor sit aenean vivamus
  hendrerit purus nequam. Pulvinarat ligula sed eger.
          </p>
        </div>
        <div class="clear"></div>
      </div>
        <nav class="top_menu">
          <ul>
            <li><a href="#">homepage</a></li>
            <li><a href="#">style demo</a></li>
            <li><a href="#">full width</a></li>
            <li><a href="#">dropdown</a></li>
            <li><a href="#">link text</a></li>
          </ul>
        </nav>
    </header>
    <!--MAIN CONTENT THERE -->
    <main>
      <div class="some_content">
        <div class="some_content_block">
            <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="" class="content_img">
            <h3 class="content_title">lorum ipsum dolor</h3>
            <p class="content_text">Orciinterdum condimenterdum nullamcorper
  elit nam curabitur laoreet met praesenean et iac
  ulum. Metridiculis conseque quis iaculum aen
  ean nunc aenean quis nam nis dui.</p>
          </div>
          <div class="some_content_block">
            <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="" class="content_img">
            <h3 class="content_title">lorum ipsum dolor</h3>
            <p class="content_text">Orciinterdum condimenterdum nullamcorper
  elit nam curabitur laoreet met praesenean et iac
  ulum. Metridiculis conseque quis iaculum aen
  ean nunc aenean quis nam nis dui.</p>
          </div>
          <div class="some_content_block">
            <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="" class="content_img">
            <h3 class="content_title">lorum ipsum dolor</h3>
            <p class="content_text">Orciinterdum condimenterdum nullamcorper
  elit nam curabitur laoreet met praesenean et iac
  ulum. Metridiculis conseque quis iaculum aen
  ean nunc aenean quis nam nis dui.</p>
          </div>
          <div class="some_content_block">
            <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="" class="content_img">
            <h3 class="content_title">lorum ipsum dolor</h3>
            <p class="content_text">Orciinterdum condimenterdum nullamcorper
  elit nam curabitur laoreet met praesenean et iac
  ulum. Metridiculis conseque quis iaculum aen
  ean nunc aenean quis nam nis dui.</p>
          </div>
      </div>
        <div class="second_some_img_blok">
          <img src="http://orig11.deviantart.net/1b04/f/2012/278/0/4/random_bg_by_pagodapeak-d5gwipc.png" alt="" class="second_some_img_blok_big_pic">
          <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="" class="second_some_img_blok_small_pic">
          <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="" class="second_some_img_blok_small_pic">
          <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="" class="second_some_img_blok_small_pic">
          <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="" class="second_some_img_blok_small_pic">
        </div>

        <div class="first_some_img_block">
          <img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt="" class="first_some_img_block_pic">
          <img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt="" class="first_some_img_block_pic">
          <img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt="" class="first_some_img_block_pic">
        </div>
      <div class="clear"></div>

    </main>
    <!-- FOOTER THERE -->
    <footer>
      <div class="go_the_top">
        <a href="#" class="go_the_top_arrow_link"></a>
        <a href="#" class="go_the_top_text_link">want go the top?</a>
      </div>
      <div class="usr_feedback">
        <form action=""></form>
        <label for="usr_name">Name:</label>
        <input name="usr_name" type="text">
        <label for="usr_email">Email:</label>
        <input name="usr_email" type="text">
        <label for="usr_message">Message:</label>
        <textarea name="usr_massage" form="usr_feedback"></textarea>
        <button type="button" name="usr_feedback_submit">Submit</button>
        <button type="button" name="usr_feedback_reset">Reset</button>
      </div>
      <div class="latest">
        <h4 class="footer_label">Latest From The Blog</h4>
        <hr>
        <a href="#" class="latest_link">Link 1</a>
        <a href="#" class="latest_link">Link 2</a>
        <a href="#" class="latest_link">Link 3</a>
        <a href="#" class="latest_link">Link 4</a>
      </div>
      <div class="social_buttons">
        <h4 class="footer_label">Keep in touch</h4>
        <hr>
        <div class="social_buttons">
          <img src="https://dgryagaiw0chj.cloudfront.net/sites/all/themes/shared/jcore_oup/images/facebook.svg" alt="follow us on Facebook" class="social_icon">
          <a href="#" class="social_link">Facebook</a></div>
        <div class="social_buttons">
          <img src="https://www.microsoft.com/en-xm/outlook-com/img/footer-icon-twitter.svg" alt="follow us on Twitter" class="social_icon">
          <a href="#" class="social_link">Twitter</a></div>
        <div class="social_buttons">
          <img src="http://orig09.deviantart.net/316b/f/2013/190/d/7/deviantart_by_tanathe-d6co5mn.png" alt="see us on Deviant Art" class="social_icon">
          <a href="#" class="social_link">Deviant Art</a>
        </div>
      </div>
      <hr>
      <p class="copyright">Copyright © 2013 Domain Name - All Rights Reserved</p>
      <p class="template_by">Template by OS Templates</p>
    </footer>
    </div>
    <!-- end wrap -->

  </body>
</html>

2
  • Спасибо большое! Я думал, что "выпадает из потока" означает, что блок больше не "взаимодействует" с другими блоками, которые в том числе тоже "выпали из потока". Теперь все понятно.
    – ovrd0se
    20 апр 2016 в 15:16
  • @ovrd0se был рад помочь. пометьте ответ принятым нажатием галочки слева от ответа, если он вас устраивает
    – lexxl
    20 апр 2016 в 15:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.