три колонки

надо сделать три колонки:
1). 200px;
2). все оставшееся место от первой и третьей.
3). 250px;

я сделал это вот так:

Код:

---

<div *style="margin-top:20px; width:100%;">
 * * <div id="left_column" style="width:200px; float:left;">left</div>
 * * * * *<div style="float:none;">
 * * * * * * * <div id="center_column" style="float:left;">center</div>
 * * * * * * * <div id="right_column" style="width:250px; float:right;">right</div>
 * * * * *</div>
</div>

---

Но если написать в любой из них текст длиннее самой колонки, то она начинает расширяться и структура рушится, а мне этого не надо. Может кто предложит подходящий вариант?

Посмотри предыдущие темы, в них косвенно касались этого вопроса.

<style>
*{
margin:0;
padding:0;
}
#container{
margin: 20px 0 0 0;
width:100%;
}
#col1{
width:200px;
float:left;
}
#col3{
width:250px;
float: right;
}
</style>

<div id=container>
<div id=col1></div>
<div id=col2></div>
<div id=col3></div>
</div>

Попробуй так. Кстати возможно ты просто вводишь контент большой в одно слово=)

Цитата:

---

Originally posted by 2ego@Jul 23 2005, 20:30
[b]Кстати возможно ты просто вводишь контент большой в одно слово=)

---

Точно =) Всем спасибо, тему можно закрыть.

Вопрос по теме... У меня аналогичная структура...
левый: 200пх, прижат к левому краю;
правый: 120пх, прижак к правому краю;
Если в центральном диве очень много текста, то он оптикает и левый и правый дивы.
Как сделать чтобы левый див не оптикался просто он был бы 100% в высоту?
height:100%; не помогло [Only registered and activated users can see links. Click Here To Register...]

[Only registered and activated users can see links. Click Here To Register...] Все что внутри центрального дива я объединил в див с float:left, но при таком раскладе у меня центральный див не оптикает правый див [Only registered and activated users can see links. Click Here To Register...] А это одно из требований... Такчто если есть советы подскажите... Я пошел даше эксперементировать [Only registered and activated users can see links. Click Here To Register...])

Ура... Да здравствуйет принцып "Саматыка" я разобрался [Only registered and activated users can see links. Click Here To Register...]
Сделал слудующую конструкцию:

<div style="width:100%;">

<div style="width:200px; height:100%;float:left;>Левый блок</div>

<div style="float:left;" >Центральная часть
<div style="width:120px; float:right;>баннер</>
</div>

</div>

Вот именно так все сейчас у меня есть [Only registered and activated users can see links. Click Here To Register...] height:100%; у левой колонки ни какого значения не имеит...

радость моя была не долгой [Only registered and activated users can see links. Click Here To Register...] я посмотрел как это в мозиле... Мда... Пошел дашье тыкаться [Only registered and activated users can see links. Click Here To Register...])

Я может чего недопонимаю, а почему бы элементарно не использовать таблицу ?

[Only registered and activated users can see links. Click Here To Register...] Гы...
Ну если неполучится то естественно таблицу суну,...
Хочется сказать "Смотри ни одной Таблицы, и классно все" [Only registered and activated users can see links. Click Here To Register...]

Ясно, а можно в ответ сказать ... гы. Ты уже как двое суток решаешь эту проблему, а я её решил за 5 сек. И при этом и кроссборузерность отпадает сама собой ... [Only registered and activated users can see links. Click Here To Register...]

mymind, верстать таблицами я уже 4 года умею и делаю это в лёт.
Я хочу без единой таблицы сайт строить...

Это можно сделать только эмулируя высоту дива фоновым изображением. По другому никак.

Вообще отвыкайте от height: 100% - вредная штука и полностью нелогичная. Оставтье это свойство там же, где и разметку таблицами.

Цитата:

---

Originally posted by agat@Jul 25 2005, 12:11
Это можно сделать только эмулируя высоту дива фоновым изображением. По другому никак.

Вообще отвыкайте от height: 100% - вредная штука и полностью нелогичная. Оставтье это свойство там же, где и разметку таблицами.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]

Хех .... а чем это Вам таблицы не понравились. Отвыкайте от таблиц. Пока что это самый удобный способ сверстать страницу. И табличный дизайн можно оптимизировать, дабы всё быстро было ... Так что еще поспорить надо, что лучше всего использовать. В конечном итоге, пользователь врядли оценит с таблицами этот дизайн или без них, также как и заказчик. Это понять может только специались в данном вопросе. А для 90% кто смотрит сайты всё равно что там внутри.

Логика vs. Хаос

mymind, не хочется с вами спорить, но разница есть. И она больше, чем вы себе сейчас можете представить.

Начиная от разработки и заканчивая поддержкой сайта для разработчика... А, так же, просмотром этого сайта пользователями. Интернет, это не только ваш 17&#39; экран монитора, это прежде всего информация. Вы видели ваши табличные сайты на экране наладонников? PDA или мобильные телефоны... видели?

Цитата:

---

Originally posted by agat@Jul 25 2005, 17:16
mymind, не хочется с вами спорить, но разница есть. И она больше, чем вы себе сейчас можете представить.

Начиная от разработки и заканчивая поддержкой сайта для разработчика... А, так же, просмотром этого сайта пользователями. Интернет, это не только ваш 17&#39; экран монитора, это прежде всего информация. Вы видели ваши табличные сайты на экране наладонников? PDA или мобильные телефоны... видели?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]

Ес-но, не на всём конечно, но во-первых для мобильных телефонов, на данный момент самое оптимальное это wap представление сайта. В итоге наиболее нужное и важное также дублируется в виде wap сайта. Что касается наладонников и pda ... смотрим [Only registered and activated users can see links. Click Here To Register...] и видим <table .... И т.д.
все они также прекрасно отображают табличную часть. Единственоое, что для PDA также можно выпустить отдельную версию сайта, благо технологии позволяют. Что касается поддержки, то тут тоже особой легкости не наблюдается. Обычно я разделяю сайт на програмную часть и внешнюю, что-то подобие EasyTemplate, но своя версия, более простая в работе. Поэтому пока что я не вижу никаких, пусть самых маленьких, доводов в пользу отказа от табличного строения страницы.

А такое решение устраивает?

Код:

---

<div style="margin-top:20px; width:100%;">
<div id="left_column" style="width: 200px; float: left; background: #FFCCFF">left</div>
<div id="right_column" style="width: 250px; float: right; background: #99FF99">right</div>
<div id="center_column" style="background: #99FFFF">center</div>
</div>

---

----
Вообще-то, я мимо проходил!

mymind: ты не понял сказаного агатом. В рассматриваемом типе верстки, главное не отсутствие таблиц, а строгое разделение структуры документа и дизайна. И если в случае с таблицами для каждого нового устройства нужно делать новый сайт, здесь нужно будет лишь подключить для каждого устройства свой модифицированый из начального цсс-файл. А в ситуации с ПОЛНОЙ сменой дизайна не переделывать весь сайт а лишь переписать цсс. И верстается кстати при наличи навыков все напорядок быстрее в виду того что сам документ логичен и понятен и при наличи дефекта в отображении сразу знаешь где причины сего.

Цитата:

---

Originally posted by 2ego@Jul 26 2005, 09:12
mymind: ты не понял сказаного агатом. В рассматриваемом типе верстки, главное не отсутствие таблиц, а строгое разделение структуры документа и дизайна. И если в случае с таблицами для каждого нового устройства нужно делать новый сайт, здесь нужно будет лишь подключить для каждого устройства свой модифицированый из начального цсс-файл. А в ситуации с ПОЛНОЙ сменой дизайна не переделывать весь сайт а лишь переписать цсс. И верстается кстати при наличи навыков все напорядок быстрее в виду того что сам документ логичен и понятен и при наличи дефекта в отображении сразу знаешь где причины сего.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]

Тогда, чтобы разделить документ и оформление, лучше верстать XML. Гораздо проще, что касается смены дизайна, то может быть мы по разному подходим к этому вопросу. Что же касается практики, то с "дизайном без таблиц" я еще ни разу не сталкивался.

Верстать в таблицах, не логично, если конечно не для себя ФОНАРЬ делать. Сайт построиный по принцыпу таблиц на CSS можно гораздо быстрее изменить дизайн чем еслиб он был в таблицах.

P.S. Хотел бы послушать мат IP когда ему закажут скины на сайт полностью сделаный на таблицах !!! [Only registered and activated users can see links. Click Here To Register...]

Код:

---

<div id="left_column" style="width: 200px; float: left; background: #FFCCFF">left</div>
<div id="right_column" style="width: 250px; float: right; background: #99FF99">right</div>
<div id="center_column" style="background: #99FFFF; margin: 0 200px 0 200px">center</div>

---

никто никого не обтекает