За последние 24 часа нас посетили 17966 программистов и 1651 робот. Сейчас ищут 2190 программистов ...

Помогите разместиь элементы

Тема в разделе "HTML и CSS", создана пользователем kostyl, 30 авг 2009.

  1. kostyl

    kostyl Guest

    Блин, вечная проблем, запарился уже.
    Короче, говорят что высота блок определяется его содержимым.
    Вот я делаю один блок. В него вставляю внутрь два "плывущих влево" других блока.
    Получаю де проблемы:
    1. Основной блок, содержащий другие два не растягивается до их высоты.
    2. Все время надо высчитывать отступы и рамку чтобы правый блок заполнил все оставшееся место и не перенесся.
    Первую проблемы решаю хаком, если можно его так назвать с добавление в основной еще одного блока.
    Вторую как то карячно делаю : -1 %.
    Может кто шарит лучше и подскажет как правильно и без всякой подобной херни?
    Вот пример:
    HTML:
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    3. "http://www.w3.org/TR/html4/loose.dtd">
    6. <title>Untitled Document</title>
    7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    8. <style type="text/css">
    9. <!--
    10. .body{
    11.     border: 1px solid #ff0000;
    12. }
    13. .left{
    14.     float: left;
    15.     width: 29%;
    16.     border: 1px solid #ffff00;
    17. }
    18. .right{
    19.     float: left;
    20.     width: 70%;
    21.     border: 1px dotted #000000;
    22. }
    23. .item {
    24. }
    25. .hack {
    26.     clear:both;
    27. }
    28. -->
    30. </head>
    32.     <div class="body">
    33.         <div class="left">
    34.                 <div class="item">Раз</div>
    35.                 <div class="item">Два</div>
    36.         </div>
    37.         <div class="right">
    38.             Три
    39.         </div>
    40.         <div class="hack"></div>       
    41.     </div>
    42. </body>
    43. </html>
    44.  
     
    #1 kostyl, 30 авг 2009
  2. kostyl

    kostyl Guest

    Я так понял все договорились не отвечать на мои сложные запросы на этом форуме ))
    (ps: это не первый "глухарь")
     
    #2 kostyl, 31 авг 2009
  3. AlexGousev

    AlexGousev Активный пользователь

    С нами с:
    25 мар 2006
    Сообщения:
    1.505
    Симпатии:
    0
    Адрес:
    Москва
    #3 AlexGousev, 31 авг 2009
  4. dots_rei

    dots_rei Активный пользователь

    С нами с:
    7 авг 2009
    Сообщения:
    193
    Симпатии:
    0
    наверное никто не знает ответа :)
     
    #4 dots_rei, 31 авг 2009
  5. kostyl

    kostyl Guest

    AlexGousev
    Спасибо, добрый человек.
    Первый вопрос решается очень просто. Если кому интересно:
    [css] .body{
    border: 1px solid #ff0000;
    overflow: hidden;
    height: 1%;
    }[/css]
    А вот со вторым проблемы...
     
    #5 kostyl, 31 авг 2009
  6. iliavlad

    iliavlad Активный пользователь

    С нами с:
    24 янв 2009
    Сообщения:
    1.689
    Симпатии:
    4
    http://chikuyonok.ru/2009/06/float-columns/

    может еще это поможет.
    когда дело блоков касается, у меня получается только когда на бумажке нарисую и вручную посчитаю.
     
    #6 iliavlad, 1 сен 2009
  7. Yadfewm

    Yadfewm Активный пользователь

    С нами с:
    20 июл 2009
    Сообщения:
    223
    Симпатии:
    0
    Сам вчера столкнулся с переносом третьего блока в строке, делаю -1%, так как добавление еще одного дива меня не спасло, кстати clear:both это не хак. И последний блок всеравно переносится, попробуй в IE потянуть браузер за левый нижний угол, уменьшая ширину браузера. Если в настройках Windows у тебя стоит галочка напротив "отображать содержимое окна при перетаскивании" то увидишь что при некоторых значениях ширины последний блок (float left) всеравно будет перепрыгивать на следущую строчку. Я не нахожу другого выхода как сделать -1% !!!
     
    #7 Yadfewm, 1 сен 2009
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)