<div> на все оставшееся место

Тема в разделе "Верстка", создана пользователем Lobachevsky, 25 июл 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Lobachevsky

    Lobachevsky Постоялец

    Регистр.:
    17 сен 2013
    Сообщения:
    140
    Симпатии:
    49
    Не могу осилить ширину блоков
    блок .menu меняет свою ширину на каждой странице(внутри меню)
    блок .search нужно разместить на все оставшееся место в .cont (внутри форма поиска)
    Код:
    <div class="cont">
    <div class="menu"><?php ...;?></div>
    <div class="search"><?php ...;?></div>
    </div>
    <!---CSS--->
    .cont{width:100%}
    menu{display:inline-block;float:left}
    search{display:block;float:right}
     
    Последнее редактирование: 25 июл 2015
  2. yaski

    yaski

    Регистр.:
    21 фев 2010
    Сообщения:
    474
    Симпатии:
    277
    Код:
    .search {
        display: block;
    }
     
  3. qpPeW

    qpPeW Постоялец

    Регистр.:
    5 окт 2009
    Сообщения:
    80
    Симпатии:
    31
    div(у) изначально задается display block
     
  4. yaski

    yaski

    Регистр.:
    21 фев 2010
    Сообщения:
    474
    Симпатии:
    277
    float:right надо убрать, тогда на всю оставшуюся ширину будет заполняться search

    [​IMG]View Screen Capture
     
    Последнее редактирование: 25 июл 2015
  5. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    костыльный непопулярный метод (по понятным причинам)
    Код:
    menu{
    float:left;
    width:200px;
    }
    .search {
    overflow:hidden;
    }
    PS строчно стили пишут только различные сжимальщики кода. Не будьте эгоистами, подумайте о тех кто потом будет ковыряться в ваших стилях.
     
  6. guru31337

    guru31337 Постоялец

    Регистр.:
    8 сен 2012
    Сообщения:
    60
    Симпатии:
    28
    Через display: table получается как раз то, что нужно - просто и понятно. Выделил для наглядности цветами div'ы меню и поиска. Можно подобавлять/поудалять пункты меню, чтобы увидеть изменения. http://jsfiddle.net/pek4jbh4/1/
     
  7. spyrius

    spyrius Создатель

    Регистр.:
    30 сен 2011
    Сообщения:
    20
    Симпатии:
    7
Статус темы:
Закрыта.