CSS как расположить рядом 2 элемента
1) float
2) можешь их абсолютно спозиционировать в соответствующем блбоке.
2) можешь их абсолютно спозиционировать в соответствующем блбоке.
Ни один из вариантов задачу не решает.
Самое простое решение:
<div style="width: 100%;background-color:green;height:200px;">
<div style="width: 100px;background-color:red;height:200px;float:left">левый</div>
правый
</div>
первый - шириной по контенту-тексту
<div style=" width: 100px; background-color:red;height:200px;float:left">левый</div>
косяк
А хоть немного подумать головой ты можешь? Если уж ты даже нашёл width:100px, то тебе не должно составить труда это стереть.
Хотя следующим шагом ты наверное доебёшься до того что дивы в зелёный и красный цвета покрашены....
Хотя следующим шагом ты наверное доебёшься до того что дивы в зелёный и красный цвета покрашены....
по стандарту, если у элемента выставлен float, то ему необходимо задать width
ну или min-width, который мало где работает 
Ссылку в студию
А хоть немного подумать головой ты можешь? Если уж ты даже нашёл width:100px, то тебе не должно составить труда это стереть.Мне по этому вопросу ничего думать не надо, я и без тебя прекрасно знаю как и что делать. Но отвечать в таком духе - настоящее мудачество. И не надо тут про зелёный с красным подъёбывать, не дети. Если такая подсветка очевидно дана для примера, то определение стилей может нести скрытый характер. Этот кусок кода может кого-то ввести в заблуждение, этот кто-то может его забрать, вставить, посмотреть как отображается в internet explorer (в нём при увеличении "жёсткой" ширины контента содержимое правой части страницы по крайней мере корректно отодвинется и доверившись твоей адекватности пойти дальше, не догадываясь, что в фаере и опере с отображением настоящий пиздец. Да, вина в этом его, что не хочет думать и проверять самостоятельно, а чрезмерно доверяет таким как ты, но ты мог эту ошибку исправить лёгким движением руки, чего не сделал по понятной причине, какую я уже обозначил: "отвечать в таком духе - настоящее мудачество".
Хотя следующим шагом ты наверное доебёшься до того что дивы в зелёный и красный цвета покрашены....
ps под автором имею ввиду не топикстартера, а вообще, где-либо, кого-либо задающего аналогичные вопросы.
Прочитал все эти эмоции. Посмотрел код. Еще раз прочитал. Еще раз посмотрел код.
Мест из-за которых в лисе должен был начаться пиздец не нашел.
Подумал, что я чего-то не догоняю и может автор поста знает больше чем я. Проверил.
Однако же нет - пиздеца все равно обнаружено не было.
Вывод - автор написал херню, не проверив свои слова на экспериментально.
Любое абсолютное значение в диве с width: 100px ни к какому пиздецу, ни в лисе, ни в ИЕ не приведет.
Мест из-за которых в лисе должен был начаться пиздец не нашел.
Подумал, что я чего-то не догоняю и может автор поста знает больше чем я. Проверил.
Однако же нет - пиздеца все равно обнаружено не было.
Вывод - автор написал херню, не проверив свои слова на экспериментально.
Любое абсолютное значение в диве с width: 100px ни к какому пиздецу, ни в лисе, ни в ИЕ не приведет.
а ты вставь картинку бОльшей ширины чем задана и посмотри что произойдёт и там и там.
А да, сорри. Об этом варианте не подумал.
О как. Хорошо. Беру свои слова назад. Ты в некотором смысле прав.
Но.
Лично мне проще написать width:100px для определения хоть-какой то ширины в этом примере чем морочиться с неразрывными пробелами (или даже с картинкой когда я этот код пишу на странице ответа нашего форума. К тому же топикстартер (если меня не обманывает память) достаточно адекватный человек и вполне способен разобраться с этой жёсткой шириной, т.к. однозначно заметно что это сделано для лучшей визуализации решения.
И вообще если человек начинает морочится с дивовой вёрсткой то из этого следует что он хоть что-то соображает и способен не лажанутся как ты описал
Предлагаю прекратить этот бессмысленный спор с наездами друг на друга, так как ответ на вопрос дан и чётко описан
Но.
Лично мне проще написать width:100px для определения хоть-какой то ширины в этом примере чем морочиться с неразрывными пробелами (или даже с картинкой когда я этот код пишу на странице ответа нашего форума. К тому же топикстартер (если меня не обманывает память) достаточно адекватный человек и вполне способен разобраться с этой жёсткой шириной, т.к. однозначно заметно что это сделано для лучшей визуализации решения.
И вообще если человек начинает морочится с дивовой вёрсткой то из этого следует что он хоть что-то соображает и способен не лажанутся как ты описал
Предлагаю прекратить этот бессмысленный спор с наездами друг на друга, так как ответ на вопрос дан и чётко описан
Да, я согласен и в отношении топикстартера, что наверняка сам разберётся, и с тем, что ширину в примере можно указать для большей наглядности, как сделал это ты. И при создании первого поста в этом топике я лишь хотел, чтобы ты дал уточнение, что в его случае фиксированную ширину следует снять. В любом случае момент разжёван, за исключением того, что можно ещё уточнить, что раз уж мы задали float, то следует задать и очищение этого свойства clear: left для избежания возможного действия приведённого куска кода на другие элементы страницы.
ps с наездами вопрос закрыт, забираю свои слова этого плана обратно.
ps с наездами вопрос закрыт, забираю свои слова этого плана обратно.
ничего не понял чего вы тут спорили
но раз вы пришли к согласию то и ладненько
а как мне терь в правый див положить контент?
конкретней: див с бордером, речь не про ие
неработающий пример:
но раз вы пришли к согласию то и ладненько
а как мне терь в правый див положить контент?
конкретней: див с бордером, речь не про ие
неработающий пример:
<div style="width: 100%;background-color:grey;height:300px;border:5px solid blue">
<div style="background-color:lightgray;height:200px;float:left;border:5px solid green">левый и очень левый</div>
правый и очень правый
<div style="background-color:yellow;height:50px;border:20px solid red">ой, у меня красная рамка уезжает влево :(</div>
</div>
Если я правильно понял в чём проблема, то по всей видимости рамка уезжает влево из-за того, что её ширина прибавляется к ширине дива растянутого на 100%, если ему не задано определение width, либо задано как width:100%. Если устраивает, то можно извратиться и имитировать правый и левый бордер картинкой в бэкграунде с repeat-y. При этом правый - корневому диву, левый - твоему вложенному. Ну и вложенному ещё задать левый и правый padding либо margin, который при незаданном определении width и обозначенном нужном doctype(возможно и вообще без него) не должен добавляться к общей ширине.
Вообще, всё реже и реже касаясь вопросов вёрстки, отхожу от тонкостей с отображением элементов при разных определениях doctype, так что тут надо непосредственно экспериментировать с кодом, по времени - пять минут, но в лом, оставляю эту возможность тебе
Вообще, всё реже и реже касаясь вопросов вёрстки, отхожу от тонкостей с отображением элементов при разных определениях doctype, так что тут надо непосредственно экспериментировать с кодом, по времени - пять минут, но в лом, оставляю эту возможность тебе
Да, ещё один важный момент по вышесказанному. Следует помнить, что если высота левого дива окажется выше правого, то очевидно и правая рамка заданная бэкграундом уедет ниже, чем высота правого дива. Поэтому, если в конкретно твоём примере это актуально, то правую рамку имитировать следует ни в корневом диве, а в ещё одном вложенном в тобой добавленный. Ну и понятно, что высота этого дива с рамкой будет независимой от высоты левого, а всегда ограничиваться контентом. То есть полной аналогии с таблицей всё равно не получаем.
То есть полной аналогии с таблицей всё равно не получаем.Ну, добавлю ещё немного. В таблице в ячейках можно задать разный цвет фона, и он естественно всегда будет заполнять 100% как по высоте, так и по ширине. А здесь, в блочной структуре этот номер не универсален, прокатит лишь с ограничениями. Например, когда заведомо известно, что растягиваться по высоте будет только из блоков, правый или левый, и никогда не будет меньше высоты второго. Тогда соответственно можно корневому задавать один цвет, а растягивающему другой. Ну я это впринципе и описал выше с бордером, если реализовывать его как бэкграунд, только не на пальцах, так сказать
да на высоту пофиг
ширину бы добиться
чтобы при этом соблюдалось изначальное правило: левый растянут по контенту
что паддинг что марджинг что бэкграундная картинка
ничего не поможет границу нормуль сделать соблюдая это правило
ширину бы добиться
чтобы при этом соблюдалось изначальное правило: левый растянут по контенту
что паддинг что марджинг что бэкграундная картинка
ничего не поможет границу нормуль сделать соблюдая это правило
Ты этого с помощью дивов не добьёшься. Хотя бы у одной из "колонок" должна быть известна ширина (в пунктах, пикселях или процентах). Ибо так спозиционировать блоки без таблиц можно, только если у хотя бы одной их них задать float или position != static. Это означает, что у этого объекта должна быть указана ширина, т.к. браузеру её самому неоткуда будет взять. (В частности, в ie у таких элементов обязательно есть layout, т.е. они обязаны иметь прямоугольник контента, и его надо откуда-то взять прежде, чем рендерить содержимое).
Единственное, что может помочь (но я не уверен, что поможет таки это конструкция вроде
Т.е. попытка собрать таблицу на коленке.
Единственное, что может помочь (но я не уверен, что поможет таки это конструкция вроде
HTML:
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
CSS:
#box {
dyspaly: table-row;
}
#left, #right {
dyspaly: table-cell;
}
Т.е. попытка собрать таблицу на коленке.
да, предыдущий пример совсем негоден, если более детально задуматься. Если контента в правой части будет много, больше чем в левом, так там совсем всё ломается. Непростую задачу автор выбрал, в лоб вот так красиво не решишь, разумность такой реализации на дивах вообще встаёт под сомнение, стоит ли оно того, и в какие дикие баги на конечном продукте это может вылиться. Хотя если заморочиться, то под конкретные требования с жуткими огриничениями можно найти способы...
Попробуй так.
http://lynn.ru/examples/dl-table.html
http://lynn.ru/examples/dl-table.html
Что тебе не нравится?
Если что, то вообще-то это три разных примера, а не одна "таблица".
Если что, то вообще-то это три разных примера, а не одна "таблица".
Вообще, попробовал врубиться в первый пост, понять, что же надо автору треда... понял, что он хочет дизайнерскую таблицу переписать на дивах.
Зачем - непонятно
Не вся же вёрстка на таблицах не труъ, если таблица используется не как таблица с данными (строки и поля) - это ещё не значит, что надо переписывать на дивах
Зачем - непонятно
Не вся же вёрстка на таблицах не труъ, если таблица используется не как таблица с данными (строки и поля) - это ещё не значит, что надо переписывать на дивах
пока не понял как работает
но вроде работает
да ты крут!
но вроде работает
да ты крут!
разумность такой реализации на дивах вообще встаёт под сомнение, стоит ли оно того, и в какие дикие баги на конечном продукте это может вылиться. Хотя если заморочиться, то под конкретные требования с жуткими огриничениями можно найти способы...йоу
ты описал то ради чего я топик создавал
Ну и изврат... Уж лучше таблица...
Да всё верно. Тут по-моему очевидно, что раз уж всплывают такие требования к реализации, то разумнее всё таки делать на таблицах. А реализовать на дивах - это уж больше как спорт, получится - гут, но вряд ли код будет соответствовать тому, чтобы его использовать в серьёзных проектах. И обязательно, просто факт, будут какие-то косяки и недочёты, возможно только мелкие и только в старых брузерах.
В конце концов, качество имеет куда более высший приоритет, чем предубеждения насчёт правильности/неправильности кода и соответствия рекомендациям. Хотя их суть и сводится в основном к качеству. Любой профи сделает на таблицах такой сайт, какой на порядок превзойдёт сделанный любителем на дивах, и все недостатки, привязанные в кучах статей к таблицам, сведутся к нулю. Ну а блочная вёрстка, конечно же оправдана, если работает по ней мастер и конечный результат будет практически идеален. В противном случае, какой смысл делать ужасный конечный результат на дивах, вместо довольно опрятных на таблицах. Вёрстка этого форума вас напрягает? А если чисто теоретически представить его реализацию на дивах? Да это просто анриал, такое тут творилось бы, что считай его и не существовало бы вообще.
В конце концов, качество имеет куда более высший приоритет, чем предубеждения насчёт правильности/неправильности кода и соответствия рекомендациям. Хотя их суть и сводится в основном к качеству. Любой профи сделает на таблицах такой сайт, какой на порядок превзойдёт сделанный любителем на дивах, и все недостатки, привязанные в кучах статей к таблицам, сведутся к нулю. Ну а блочная вёрстка, конечно же оправдана, если работает по ней мастер и конечный результат будет практически идеален. В противном случае, какой смысл делать ужасный конечный результат на дивах, вместо довольно опрятных на таблицах. Вёрстка этого форума вас напрягает? А если чисто теоретически представить его реализацию на дивах? Да это просто анриал, такое тут творилось бы, что считай его и не существовало бы вообще.
Оставить комментарий
pitrik2
без таблиц можно как-то по простому сделать?нужно рядом два элемента расположить
первый - шириной по контенту-тексту
второй - шириной по всему оставшемуся месту
ну тоесть нужен аналог:
<table><tr>
<td>ляляля</td>
<td width="100%"> </td>
</tr></table>