Не работает float: left

Тема в разделе "Верстка", создана пользователем verfaa, 9 май 2012.

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

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Всем привет.

    Есть блок див. Внутри него через цикл смарти foreach выводятся другие блоки див.

    Они имеют вот такой стиль css:


    Код:
    .user_album {
    
    width: 250px;
    
    border: 3px dotted #f17dc9;
    
    border-radius:25px;
    
    padding: 5px;
    
    margin: 10px;
    
    color: #FCF7E4;
    
    }
    
    структура страницы примерно такая:
    Код:
    <div id="tab" class="tab_content">
     
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    ... 
    </div> 
     
    

    и на странице отображаются примерно таким образом:





    [​IMG]

    Я хочу, чтобы эти блоки шли по вертикали в 2 ряда и добавляю в класс user_album свойство float: left;



    В результате получаю такую картину:
    [​IMG]

    Т.е. блоки div class="user_album" при свойстве float: left сразу выходят за границы блока div id="tab" class="tab_content", а без этого свойства нормально все, почему так никак понять не могу. Как сверстать страницу со свойством float: left чтобы блоки div class="user_album" были внутри div id="tab" class="tab_content" и этот блок нормально тянулся вниз.
     
  2. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    724
    Симпатии:
    314
    К классу
    Код:
    tab_content
    добавьте
    Код:
    overflow:hidden
     
    verfaa нравится это.
  3. krdma

    krdma Постоялец

    Регистр.:
    1 июн 2009
    Сообщения:
    89
    Симпатии:
    15
    покажи стиль
    Код:
    tab_content
    там возможно стоит display:table
     
  4. vitmar

    vitmar Постоялец

    Регистр.:
    27 апр 2012
    Сообщения:
    84
    Симпатии:
    40
    Может они у вас банально по ширине не становятся. Проверьте ширину id="tab" и вот эти параметры во вложенных дивах:
    Код:
    width: 250px;
    margin: 10px;
     
  5. PapaJoe

    PapaJoe

    Регистр.:
    4 авг 2008
    Сообщения:
    620
    Симпатии:
    311
    Ну так то да, у ТС неправильно настроен css в id=tab или в class=tab_content. Простой пример
    Код:
    <html><head><title></title></head>
    <body>
    <style>
    .user_album {
    width: 250px;
    border: 3px dotted #f17dc9;
    border-radius:25px;
    padding: 5px;
    margin: 10px;
    color: #FCF7E4;
    float: left;
    }
    .tab_content{
    background-color:#eee;
    width:600px;
    }
    </style>
    <div id="tab" class="tab_content">
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    <div class="user_album">content</div>
    </div>
    </body></html>

    работает так, как на картинке в аттаче

    [​IMG]
    вполне возможно, что в id=tab или в class=tab_content установлено примерно следующее:
    Код:
    display:overflow;
    height:100px;
     

    Вложения:

    • 12.png
      12.png
      Размер файла:
      21,5 КБ
      Просмотров:
      71
  6. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Вариант Sunday оказался единственно верным, все заработало как надо. А стили для id="tab" и class="tab_content" вообще в css не прописаны - они прописаны для скрипта jquery, чтобы выборки по ним делать. Мне только очень интересно, каким же образом работает свойство overflow:hidden и почему с ним все нормально заработало... Я довольно много работал с css, верстал разные несложные блоки, формы и всегда без него обходился и все нормально тянулось и растягивалось всегда. В учебнике написано про него только "hidden Отображается только область внутри элемента, остальное будет скрыто. " и все, никаких примеров.., как то из определения не очень понятно. Расскажите плиз кто в теме про overflow:hidden и почему он именно он помог в моём случае, очень интересно, спасибо)
     
  7. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    724
    Симпатии:
    314