3 колонки, ширина средней растягивается по содержимому

cereal005 · March 9, 2008

Здравствуйте!

Cтолкнулся с такой проблемой... Надеюсь на Вашу помощь!

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

Долго искал, но так и не понял как это можно реализовать..

Если не сложно переделайте вот этот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
 * { 
 margin:0;
 padding:0;
}
body, html {
 color: #4D4D4D;
 font-size:12px;
 font-family:Arial, Helvetica, sans-serif;
 min-width:1000px;
}
#main {
 margin-top:2px;
}
#wrapper {
 float:left;
 width:100%;
 background:url('../images/content.jpg') repeat-x;
}
#content {
 margin:0 210px;
 background-color: white;
}
#left {
 float:left;
 width:210px;
 margin-left:-100%;
 background-color: yellow;
}
#right {
 float:left;
 width:210px;
 margin-left:-210px;
 background-color: red;
}
#footer {
 clear:left;
 background:#222;
 color:#fff;
}
</style>
</head>
<body>
<div id="header"> Шапка сайта Шапка сайта Шапка сайта Шапка сайта </div>
<div id="main">
<div id="wrapper">
<div id="content"> КонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтентКонтент</div>
</div>
<div id="left">Левое меню Левое меню Левое меню Левое меню Левое меню Левое меню Левое меню
Левое меню Левое меню Левое меню Левое меню</div>
<div id="right">Правое меню Правое меню Правое меню Правое меню Правое меню Правое меню Правое меню
Правое меню Правое меню Правое меню Правое меню Правое меню </div>
</div>
<div id="footer"> Подвал</div>
</body>
</html>

Зарание спасибо!

Pavel_html · March 9, 2008

Советую опасатся Димы, он тебе такое наверно напишет...

cereal005 · March 12, 2008

Пусть хоть что-нибудь напишет...неужели нет решения?

ZooY · March 13, 2008

Самое простое и очевидное решение - использовать таблицу.

polecat · March 13, 2008

CSS-свойство float с установленным значением left.

Читать В общем надо статьи вам.

ZooY · March 13, 2008

Чета я запутался, тебе нужно чтобы у тебя левая колонка была привязана или все таки правая?

Scrum · March 13, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 * {
 margin:0;
 padding:0;
}
body, html {
 color: #4D4D4D;
 font-size:12px;
 font-family:Arial, Helvetica, sans-serif;
 min-width:1000px;
}
#main {
 margin-top:2px;
}
#wrapper {
 background:url('../images/content.jpg') repeat-x;
}
#content {
 margin: 0 210px 0 210px;
 background-color: white;
}
#left {
 float:left;
 width:210px;
 background-color: yellow;
}
#right {
 float:right;
 width:210px;
 background-color: red;
}
#footer {
 clear:left;
 background:#222;
 color:#fff;
}
 /*]]>*/
 </style>
</head>

<body>
 <div id="header"> Шапка сайта Шапка сайта Шапка сайта Шапка сайта </div>
 <div id="main">
 <div id="wrapper">
 <div id="left">Левое меню Левое меню Левое меню Левое меню Левое меню Левое меню Левое меню
 Левое меню Левое меню Левое меню Левое меню</div>
 <div id="right">Правое меню Правое меню Правое меню Правое меню Правое меню Правое меню Правое меню
 Правое меню Правое меню Правое меню Правое меню Правое меню </div>
 <div id="content"> Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент
 </div>
 </div>
 </div>
<div id="footer"> Подвал</div>
</body>

</html>

так чтоль ?

Константин · March 13, 2008

Таблицами лучше сделай. Забей, что все дивами надо делать.

кстати, это же 2я тема этого форума. там и ссылка есть хорошая http://www.pixy.cz/blogg/clanky/css-3col-layout/

Sign In

3 колонки, ширина средней растягивается по содержимому

Question

cereal005

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Pavel_html

Link to comment

Share on other sites

cereal005

Link to comment

Share on other sites

ZooY

Link to comment

Share on other sites

polecat

Link to comment

Share on other sites

ZooY

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

Константин

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information