"clear" в блочном резиновом двухколоннике? @ DeForum.ru

Есть две колонки дивами, одна фикса float-нута влево, в другой колонке тоже есть float-ы и их надо остановить clear-ом. Проблема: все сползает до конца левой колонки. Как победить?

Пример

Код:

…   вырезанно

#main {
   overflow:hidden;
   position:relative;
   width: 100%;
   color: #000;
   background-color: #fff;
}

#menubar {
   padding: 10px;
   float: left;
   width: 179px;
}

#maincontentfull {
   padding: 20px 20px 20px 20px;
   margin: 0 0 0 200px;
   background-color: #fff;
}
#content {
   margin: 0 0 20px 0;
   position:relative;
}

.shopsphoto img {
   float:left;
   border:#f00 solid 1px;
   margin: 5px;
}
.shopname {
   padding: 10px 10px 0 10px;
   clear: left;
}

…   вырезанно

   <div id="main">
    
    <!--  Левая колонка  -->
            
        <div id="menubar">
            <div class="menu">
                <ul>
                    <li><a href="#" >link</a></li>

                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>

                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>

                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>
                    <li><a href="#" >link</a></li>

                </ul>

            </div>
        </div>

    <!--  Центральная колонка  -->        
        
        <div id="maincontentfull">
        <div id="content">
        
    <p>Первый абзац текста</p>
        <div class="shopsphoto">
            <img src="no_save.gif" width="150" height="112">

            <img src="no_save.gif" width="150" height="112">
            <img src="no_save.gif" width="150" height="112">
            <img src="no_save.gif" width="150" height="112">
        </div>

    <p class="shopname">Второй абзац текста</p>
        <div class="shopsphoto">
            <img src="no_save.gif" width="150" height="112">
            <img src="no_save.gif" width="150" height="112">

            <img src="no_save.gif" width="150" height="112">
            <img src="no_save.gif" width="150" height="112">
        </div>

        </div>
        </div>

   </div>

…   вырезанно

Есть конечно способ без clear (через помещение float-ных блоков в еще один float-ный бокс) - но тут свои косяки при маленьком контенте

Пример 2

з.ы. Я понимаю что все можно легко решить, сделав колонки таблицей, но все-таки хотелось блоком.

DI-S писал(а):

Есть две колонки дивами, одна фикса float-нута влево, в другой колонке тоже есть float-ы и их надо остановить clear-ом. Проблема: все сползает до конца левой колонки. Как победить?

Можно уточнить насчёт сползания до "конца левой колонки"? Вам что надо, чтобы в первом приведённом варианте второй абзац текста и вторая пачка картинок шли сразу после первой партии картинок (как во втором варианте)?

UPD:
Вобщем, чтобы Ваши картинки с текстом не вылезали за границы блока content, поищите или здесь на форуме или в сети, КАК организовать двухколоночную страницу с растягиванием обеих колонок на полную высоту независимо от количества контента в каждой из колонок.

tentoys писал(а):

Вам что надо, чтобы в первом приведённом варианте второй абзац текста и вторая пачка картинок шли сразу после первой партии картинок (как во втором варианте)?

да (при размере экрана (примерно) < 1600 - ФФ и < 1000 - ИЕ).

при большом окне поведение уже не то что хотелось бы.…

второю колонку тоже надо флоатнуть влево
м под ними тоже поставить свой клеар

Да нет! Я наверно неправильно объяснил! У меня нет проблем с подвалом и с высотой самих колонок! У меня проблема в том что я не могу использовать "clear" в "content"-е если у меня колонки сделаны с использованием "float". Я думал может есть какое-нибудь свойство блока чтобы "clear" действовал только внутри него и не смотрел на "внешние" флоты. Пока запихнул все в таблицу, но найти решение хочу, так как такая ситуация возникает постоянно. :gent:

было, здесь же

Класс «clear» назначаете контейнеру, ПОСЛЕ которого нужно очистить флоат. Кроме того, это клас позволяет обернуть этот контейнер даже вокруг плавающих внутри него элементов, т.е. он корректно его растягивает на высоту, занимаемую его плавающими чайлдами, если вы понимаете о чем я говорю.

Пользуйтесь поиском

Код:

:after

хмм... , такая конструкция решила проблему в ИЕ, но в ФФ не работает, но все равно спасибо. Буду думать.

karamba, это ж было другое совсем. Там был баг с ртл-ным направлением в мозилле. Так и не решился без извращений.

решил!!!! В варианте2 надо было не float, а:

Код:

.shopname {
   overflow: hidden;
   display:inline-block;
}
.shopname {
   display:block;
}

ссылку эту уже читал, но видимо не до конца, спасибо karamba и всем кто пытался помочь. :gent:

Пример

Лампочка, я дал ссылку именно на свой коммент с клиром, который просто всплыл в твоем топике

DeДверь
Логин:
Пароль:
	Автологин