Резиновая верстка - какие свойства задать DIV-у?

#1 23 ноября 2012 в 00:27

И снова прошу помощи у знатоков программирования по пустяковому вопросу… Так сложилось, очень плохо ориентируюсь в "резиновой" верстке дивами — всегда резиновые сайты верстал таблицами (там все просто...) и не на этой системе — но да это не важно… Столкнулся с такой задачей:
По задумке, в шапке сайта 2 блока. Один фиксированный по размеру (красный справа) и второй — резиновый. Вот примерно так:

Т.е. при изменении габарита браузера, левый блок должен сжиматься а правый оставаться как есть…
Но к сожалению, по факту, происходит вот такая ерунда:

Вне зависимости от ширины браузера, если содержимое блока становится больше текущей ширины браузера, мой фиксированный правый (красный) блок просто скачет вниз, а на его место выходит распирающий…
Все это сейчас оформлено таким кодом (фрагмент из шаблона):

 
<div>
       <div style="float:left; padding-left: 15px;"> //глобальный левый блок, который должен расширяться...
                    <div id="hed_nws"><?php $inPage->printModules('hed_nws'); ?></div> //содержимое резинового блока
                    <div id="topmenu"><?php $inPage->printModules('topmenu'); ?></div>
                    <div id="topmenu"><?php $inPage->printModules('topmenu2'); ?></div>
                    <div id="pathway">
                    <?php $inPage->printPathway('&#8594;'); ?>
                    </div>
         </div>
         <div style="float:right;"><?php $inPage->printModules('rand_ph'); ?></div>//фиксированный правый блок
</div>

Снова очень прошу — подскажите плиз, кто знает КАК! Спасибо!)

#2 23 ноября 2012 в 01:42

ALreD, это не самый лучший способ, но рабочий. Заметьте, php я комментировал, фоны прописал для себя. Также по коду правый блок, должен быть сверху левого.

 
<div>
	<div style="float:right; background: red; width: 250px;">
		<?php //$inPage->printModules('rand_ph'); ?>111
	</div>
	<div style="padding-left: 15px; background: green; margin-right: 250px;"> 
		<div id="hed_nws"><?php $inPage->printModules('hed_nws'); ?></div> 
		<div id="topmenu"><?php $inPage->printModules('topmenu'); ?></div>
		<div id="topmenu"><?php $inPage->printModules('topmenu2'); ?></div>
		<div id="pathway">
		<?php //$inPage->printPathway('>'); ?>222
		</div>
	</div>
	<div style="clear: both;">
</div>

Dezerit Templates - верстка, шаблоны, дополнения для InstantCMS

#3 23 ноября 2012 в 01:55

Сорри, вот это не понял:

Также по коду правый блок, должен быть сверху левого.
Dezerit

Т.е. у меня полюбому не получится собрать эти блоки рядом? Или я туплю?)
Так… из того что я вижу… Вы задали жесткий размер правому блоку — у меня он тоже задан, но в стилевом файле, не стал просто уточнять… Далее… Вы меняете блоки местами и просто даете псевдо-левому блоку правый margin, таким образом освобождая правый блок от сдвига левым… Хм, щас попробую так сделать…

Сегодня в 15:16

#4 23 ноября 2012 в 02:02

ALreD, в исходном коде посмотрите, я поднял код правого блока выше левого, чтобы он загружался браузером первый.

Dezerit Templates - верстка, шаблоны, дополнения для InstantCMS

#5 23 ноября 2012 в 18:16

Dezerit, да, Вы совершенно правы. Ваш метод работает… Единственное, что Вы имели в виду что это "не самый лучший способ"? Можно решить более грамотно такую задачу?
Спасибо за подсказку!)

#6 23 ноября 2012 в 20:35

ALreD, метод рабочий, но имеет минусы:
будь это контентная часть, то ваша правая сторона попадала в код раньше самого основного контента. Как утверждали сеошники, это не гуд. Сейчас не знаю т.к. пользуюсь более сложной схемой, примерно такой

Dezerit Templates - верстка, шаблоны, дополнения для InstantCMS

#7 23 ноября 2012 в 21:57

Dezerit, спасибо, внимательно посмотрю то что Вы прислали.

#8 23 ноября 2012 в 23:52

Как вариант попробуйте (контент идет "выше" сайдбара):

<div>
	<div style="float:left; margin-left:-305px; width:100%;">
		<div style="margin-left:305px;">
		content
		</div>
	</div>
	<div style="float:right; width:305px;">
		sidebar
	</div>
<div style="clear: both"></div>   
</div>

Ширина правого блока 305 пикс.
Только стили вынести отдельно не забудьте.

Нет еще DropBox?

Переделка на v1.10

Обрезаются теги

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Резиновая верстка - какие свойства задать DIV-у?

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Как в компоненте доски объявлений дополнительным полям задать звёздочку?

[ЕСТЬ РЕШЕНИЕ] Не работает Типы контента - Контент - Свойства - "Редактировать категорию"

Дизайн, верстка, верстка на instantcms, разработка небольших дополнений

CSS для поля

Как у записей задать рандомные даты и время публикации?

Можно ли задать стиль (CSS) для поля?

InstantCMS Team

О проекте

Поддержка

Дополнения