[Помогите] смещение блоков с увеличением\уменьшением контента

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем ВладМетелкин, 25 май 2016.

  1. ВладМетелкин

    ВладМетелкин

    Регистрация:
    25 май 2016
    Сообщения:
    1
    Симпатии:
    0
    Коллеги, всем доброго дня или... кто когда...
    Недавно занялся версткой, вопрос такой, наверное неумный, но это принципиальная вещь:
    рамечаю дивы последовательно 5 штук.
    При этом 3-ий является последним на странице. Как понимаете первые три блока справа.
    4-ый и 5-ый навигация и контакты соответственно, как понимаете слева.
    2-ой блок с контентом.
    нужно чтобы при увеличении\уменьшении контента (объема) 2-го, 4-го и 5-го блока вниз съезжали только эти блоки автономно, смещая только 3-ий (лого футер) и не зацепляя за собой родительские, как их все разъединить.
    Код:
    html:
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
            <title>test</title>       
            <link rel="stylesheet" type="text/css" href="C://OpenServer/domains/localhost/TEST/style.css">
        </head>
        <body background="gradient.jpg" class="gradient" id="body_transformation">
           
            <img class="logo"  src="logo.jpg"></img>
            <img class="header" src="header.jpg"></img>
           
           
           
       
        <div class="content">
        Главная / О компании
                                                                                             <hr id="line"></hr>
       
        <h2>Рекламное агенство B2C GROUP</h2>
        <img src="foto.jpg" id="visual"></img>   
        Агенство GROUP образовано в марте 2006 года. В состав команды входят  специалисты, имеющие большой опыт работы в области BTL, маркетинга, продаж. B2C GROUP узкоспециализированное агенство. Основное направление деятельности - BTL.
         <p>Территория деятельности агенства - Нижний Новгород, (центральный офис)Центр, ПФО, Юг, Урал, Сибирь. В городах Кострома, Иваново, Пенза, Ульяновск, Киров,Чебоксары, Йошкар-Ола, Саранск работают представители B2C GROUP, в остальных городах - надежные партнеры. </p>
         <p>Качество работы нашего агенства подтверждается успешным опытом сотрудничества с крупными транснациональными и федеральными компаниями. </p>
         <p><h3>Наши преимущества</h3></p>
         
        <p> <ul type="square" id="ul">
        <li>Первый пункт преимуществ</li>
        <li>Второй пункт преимуществ</li>
        <li>Третий пункт преимуществ</li>
           
        </ul></p>
       
     
                                                                                              <hr id="line1"></hr>
    </div>
       
           
        <div class="footlogo">
            <img src="footlogo.jpg"></img>
        </div>   
       
        <div class="navigation"><h3>
    
    
    <li><a id="accentuation" href="#">О компании</li></a>
    <img src="dashed.jpg" alt="" /></img>
    <li><a id="accentuation" href="#">Услуги</li></a>
    <img src="dashed.jpg" alt="" /></img>
    <li><a id="accentuation" href="#">Клиенты</li></a>
    <img src="dashed.jpg" alt="" /></img>
    <li><a id="accentuation" href="#">Проекты</li></a>
    <img src="dashed.jpg" alt="" /></img>
    <li><a id="accentuation" href="#">Вакансии</li></a>
    <img src="dashed.jpg" alt="" /></img>
    <li><a id="accentuation" href="#">Контакты</li></a>
    
    
    </h3>
       
    </div>
    <div class="contacts">
        <h1>(831) 416-06-54</h1>
        <p><h6>603155, г.Нижний Новгород</p>
        <p>ул.Б.Печерская, д31/9 оф.2228 </h6>
        </p>
        </div>   
       
    
        </body>
    </html>
    
    
    css:
    
    .gradient {   
        background-repeat: repeat-x;
              }
    
    .logo {
        margin-top: 92px;
        margin-left: 60px;
          }
       
    .header {
        position: absolute;
        margin-top: 44px;
        margin-left: 82px;
            } 
    
    .content {
        text-align: justify;
        line-height: 22px;
        margin-top: 64px;
        width: 898px;
        max-height: 100%;
        font-family: helvetica; color:#3231af;
        margin-left: 410px;
        }
    
    #line {
        height: 3px;
        background-color: #0e79d1;
          }
           
    #line1 {
        height: 3px;
        background-color: #0e79d1;
        margin-bottom: 40px;
          }       
           
    #ul {
        padding-left: 17px;
        line-height: 30px;
            }
    
    .footlogo{ 
        margin-left: 60px;
        margin-bottom: 60px;
                }   
    
    
    #visual {
        float: left;
        padding-right: 20px;
        padding-bottom: 30px;
            }
    
    .navigation {
        position: absolute;
        border-radius: 8px;
        text-align: center;
        margin-top: -716px;
        margin-left: 60px;
        width: 255px;
        max-height:1000px;
        font-family: helvetica;
        color:#3231af;
        background:#dbe8f9;
        line-height: 23px;
        list-style-type: none;
    }   
               
    #accentuation {
        text-decoration: none;
    }
    
    .contacts {
        margin-left: 60px;
        margin-top: -380px;
        width: 253px;
        font-family: helvetica; color:#3231af;
        text-align: center;   
        line-height: 3px;
                }
    
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.053
    Симпатии:
    779
    Оберните блоки, которые слева, в дополнительный контейнер и поставьте ему float:left.