ФорумРазработкаКлиентская сторонаВерстка и оформление → Проблема со свойством float

Проблема со свойством float

  • maximusgym

    Сообщения: 59 Репутация: N Группа: Кто попало

    Spritz 4 апреля 2011 г. 5:51

    Подскажите почему 2 блока на странице находятся под друг другом. По идее 1й блок должен обтекаться и второй блок должен как раз разместиться параллельно. Обычно я решал проблему путем добавления инфы в первый блок навигации и там та же картинка обтекалась и располагалась параллельно навигации. Но тут навигации длинная и сделать так уже не получится.
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset="windows-1251"/>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <title>Забайкальский Горный Колледж</title>
    </head>
    <body>
    <div class="maindiv">
    <div class="naviabitura">
    <div class="leftnavi2">
    <div class="otd"><a>Абитуренту</a>
    </div>
    <a href="#">Правила приема 2011</a>
    <a href="#">Положения о бюджетных местах</a>
    <a href="#">Сроки приема документов</a>
    <a href="#">Документы для поступления</a>
    <a href="#">Подготовительные курсы</a>
    <div class="otd"><a>Приемная комиссия</a>
    </div>
    <a href="#">График работы</a>
    <div class="otd"><a>Оплата за обучение</a>
    </div>
    <a href="#">Стоимость обучения</a>
    <a href="#">Положение об оплате</a>
    <a href="#">Реквизиты</a>
    </div>

    </div>
    <div class="content_index">
    <p align="center"><font color="174fcc">Сентябрь 1917</font></p><font color="#615a2d">
    <p >Самостоятельное горное отделение в политехническом училище. Возглавлял его горный инжинер А.Н.Банщиков</p>
    <p align="center"><font color="174fcc">Сентябрь 1947</font></p>
    <p>796e20В соответствии с постановлением Совета Министров СССР от 17.09.1947г. №3283 приказом министра угольной промышленности Восточных райнов СССР
    от 02.10.1947г. №30-к учебное заведение называется Читинским горным техникумом.</p>
    <p align="center"><font color="174fcc">Сентябрь 2005</font></p>
    <p align="justify">Горный техникум становится колледжем и приобретает новое наименование Федеральное государственное образовательное учреждение среднего профессионального
    образования Забайкальский горный колледж.</p>
    <p align="center"><font color="174fcc">Май 2009</font></p>
    <p align="justify">Горному колледжу присвоено имя М.И.Агошкова</p></font>
    </div>

    </div>
    </body>
    </html>

    body {
    margin:0;
    padding:0;
    text-align:left;
    height:100%;
    background-color:#e1e4e6;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;

    }
    html {height:100%;
    }
    .maindiv {
    margin:0 auto;
    width:980px;
    height:auto;
    background-color:#FFF;
    border:1px solid #CCC;
    border-radius:10px;
    -moz-border-radius:10px;
    overflow:hidden;
    }
    .leftnavi2 {
    float:left;
    width:200px;
    height:200px;
    background-color:e2e2e2;
    }
    .leftnavi2 a {font: bold 13px Verdana;
    padding: 6px;
    padding-left: 10px;
    display: block;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid gray;
    }
    .leftnavi2 a:hover{
    background-color: #cccccc;
    color: #31a5ff;
    }
    .naviabitura {
    margin:3px;
    width:200px;
    height:450px;
    background-color:#e2e2e2;
    border-radius:10px;
    -moz-border-radius:10px;
    }
    .content_index {
    text-indent:20px;
    width:600px;
    height:auto;
    float:right;
    margin-top:10px;
    margin-right:70px;
    }
  • artoodetoo

    Сообщения: 5147 Репутация: N Группа: в ухо

    Spritz 4 апреля 2011 г. 9:11, спустя 3 часа 20 минут 20 секунд

    убери div naviabitura - проблема в нем.

    заодно убери свойство height у .leftnavi2
    ιιlllιlllι унц-унц
  • maximusgym

    Сообщения: 59 Репутация: N Группа: Кто попало

    Spritz 4 апреля 2011 г. 9:36, спустя 25 минут 32 секунды

    artoodetoo Спс большое,а то я уже голову сломал почему так) Постараюсь больше на те же грабли не наступать.

Пожалуйста, авторизуйтесь, чтобы написать комментарий!