А если без JS? И можно даже забыть про поддержку старых ослов. Я слышал что можно добиться поставленной задачи через относительное позиционирование, только я пока смог решить задачу наполовину таким способом: #cell { position: relative; display: inline-block; left: 50%; } .content { position: relative; right: 50%; display: inline-block; } Как я уже говорил выше, так можно решить задачу наполовину, т.е. - центрировать блок по горизонтали. А как сделать то же самое но по-вертикали, придерживаясь условий задачи(не задавая размеров и не используя JS)?
Есть HTML: <div id="wrapper"> <div id="cell"> <div class="content"> Content goes here </div> </div> </div> Задача: расположить div.content аккурат по центру окна браузера, при этом, у блока неизвестны width и height Решение №1: #wrapper { display: table; } #cell { display: table-cell; vertical-align: middle; text-align: center; } .content { display: inline-block; } Вопрос: как можно добиться аналогичного результата без использования display: table/table-cell и JS?
Т.е. в первом случае(верхнее изображение) блок c "думает" что блок b идет сразу после блока a и игнорирует тот факт, что к b применен margin-left, так что ли?
Все, додумался. Текст параграфа обрезался через overflow: hidden. psywalker, Int, спасибо за ответы. Однако у меня появился новый вопрос. Почему если блоку c задать margin-left: 150px - содержимое(текст) обтекает плавающие блоки и появляется снизу: , а если увеличить поле скажем до 350px обтекания не происходит: По логике вещей, раз мы отодвинули плавающий блок b на расстояние достаточное чтобы втиснуть находящийся в нормальном потоке блок c то его содержимое не должно обтекать плавающие блоки. Разве нет?
1. Виноват. Исправил. 2. А при чем тут родитель плавающих элементов? Все три блока находятся в одном и том же контейнере - div.wrapper и если уж на то пошло то он схлопнется только до высоты последнего оставшегося в потоке блока - c. В то же время, если я изменю CSS таким образом: .b { background: #fc5; color: #333; float: left; } .c { background: #247; margin-left: 300px; } т.е. убрав у b левое поле и увеличив левое поле у c вдвое соответвенно, то содержимое c - параграф будет отображаться. С точки зрения общего потока - ничего не меняется, a и b как плавали влево так и плывут, однако в первом случае содержимое блока c исчезает, а во втором - нет. Соответственно вопрос в следующем - почему не видно контента блока c если мы его меняем местами с блоком b при помощи margin?
Great Rash, rash, спасибо за ответы А существуют ли какие-то элементы(приметы), по которым можно понять что дизайн фиксированный или резиновый? Например, в макете много сложных НЕ ПОВТОРЯЮЩИХСЯ графических элементов или скажем в background для body(#wrapper, #header, etc.) положена фотография.
А должна ли ширина макета соответствовать максимальной ширине будущей страницы? Ведь понятно, что хоть мы и говорим о резиновой разметке, тем не менее, ее ширина все равно должна быть ограничена какими-то разумными пределами. Сейчас стандартом(поправьте меня, если я не прав) для фиксированного макета считается ширина равная ~ 1000px(940/960 как вариант). Соответственно если ширина макета равна скажем 1200px, то значит ли это что его нужно делать резиновым или это слишком общий параметр и дьявол как всегда кроется в деталях?
Привет, уважаемые жители форума. У меня вот такой вопрос - а как вы определяете, будет страница непостоянной или фиксированной ширины? Можно ли это как-то определить по макету и если да, то как? И отсюда вопрос два - если макет все же с непостоянной шириной, то как вы определяете будет ли это резина(min-width/max-width/width -%) или гибкая разметка основанная на em?