Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!






Страниц: 1

 

#1 21.09.2014 01:06

Phobos
Новичок
Откуда: Воронеж
Зарегистрирован: 21.09.2014
Сообщений: 2
Вебсайт

Два DIV-а, одинс с фикс. разм. другой на всю ост. ширину

Доброго времени суток!
Только начинаю заниматься изучением и практическим применением "ДИВной" вёрстки.
Подскажите пожалуйста, немного запутался с одним вопросом.
Есть у меня 2 дива, которые должны располагаться рядом. Один - левая колонка с фиксированным размером ( width: 225px; ), другой - правая колонка, растягивающаяся на всё оставшееся пространство (как это обычно у ячеек таблиц получается).

Вот как я попытался это реализовать:
CSS:

Код:

#left_column {
   width: 225px;
   border-right: dashed 1px #aab;
   float: left;
   display: inline;
}
#content {
   font-size: 11.5px;
   float: right;
   width: auto;
   display: inline;
}

HTML:

Код:

      

         
         

            
ИНФОРМАЦИЯ

            

                  - Модуль статей загружен. 
   - Модуль основного меню загружен. 
   - Модуль новостей загружен. 

            

         

      

      











         

            
   zrgzrhdrzh


            
            текст текст текст
            


            

            меню блока :: меню юлока :: ...
         

         

            
   zrgzrhdrzh


            
            текст текст текст
            


            

            меню блока :: меню юлока :: ...

Получается, что блок #content "сваливается" вниз, под блок #left_column, если допустим там не 3 слова "текст текст текст", а, к примеру вводная часть статьи/новости.

Пробовал подбирать свойством width к елементу #content, подобрал на 77% работало, но при изменении размеров окна браузера опять таки блок падал под левую колонку.

Подскажите, что делать? Может я что-то перемудрил/недомудрил? Неохота прибегать к таблицам, с которыми я уже достаточно долго работал...

P.S. Эксперементирую в FF 3.6, однако не особо важно, т.к. всё равно кроссбраузерное решение нужно.
P.S. 2. Если у элемента #content делаю такое свойство:   display: table-cell; то получается примерно так как мне нужно. Однако это значение (table-cell) свойства display не кроссбраузерно, судя по данным.

Отредактированно Phobos (21.09.2014 01:34)

Нет на форуме

 

#2 21.09.2014 14:02

vashurin
Moderator
Зарегистрирован: 14.09.2010
Сообщений: 291
Вебсайт

Re: Два DIV-а, одинс с фикс. разм. другой на всю ост. ширину

Не в том направлении думаете smile. Чуть ниже тема: /forum/viewtopic.php?id=2086 , попробуйте мой пример.
От себя, советую для левой колонки проставить overflow:hidden (своеобразный презерватив tongue )

С уважением, Вашурин Владимир.

Нет на форуме

 

#3 21.09.2014 18:05

Phobos
Новичок
Откуда: Воронеж
Зарегистрирован: 21.09.2014
Сообщений: 2
Вебсайт

Re: Два DIV-а, одинс с фикс. разм. другой на всю ост. ширину

vashurin,
Благодарю! Всё получилось wink. Исключая настройки шрифтов и прочей ерунды оставил в левом блоке width: 225px; float: left; , в правой как вы и посоветовали overflow: hidden; и убрал float.

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

Просто действительно ощутима разница в размерах файлов, количестве и читабельности кода между табличной и блочной вёрсткой, поэтому охота более-менее хорошо изучить данный метод.

Статичный дизайн я верстал без проблем (почти smile ), а вот с "дивной резинкой" не сталкивался до вчерашнего дня.

Отредактированно Phobos (21.09.2014 18:09)

Нет на форуме

 

 

Страниц: 1


Board footer