CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny

eGospodarka.pl › Grupy › pl.comp.www › CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny › CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny

Path: news-archive.icm.edu.pl!news.gazeta.pl!newsfeed.pionier.net.pl!news.man.lodz.pl
!news.nask.pl!news.nask.org.pl!newsfeed2.atman.pl!newsfeed.atman.pl!newsfeed.ne
ostrada.pl!unt-exc-01.news.neostrada.pl!unt-spo-a-01.news.neostrada.pl!news.neo
strada.pl.POSTED!not-for-mail
From: "Robbo" <y...@m...com>
Newsgroups: pl.comp.www
Subject: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
Date: Tue, 17 May 2011 15:27:19 +0200
MIME-Version: 1.0
Content-Type: text/plain; format=flowed; charset="iso-8859-2"; reply-type=original
Content-Transfer-Encoding: 8bit
X-Priority: 3
X-MSMail-Priority: Normal
X-Newsreader: Microsoft Outlook Express 6.00.2900.5512
X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.5512
X-Antivirus: avast! (VPS 110517-0, 2011-05-17), Outbound message
X-Antivirus-Status: Clean
Lines: 124
Message-ID: <4dd277ac$0$2444$65785112@news.neostrada.pl>
Organization: Telekomunikacja Polska
NNTP-Posting-Host: 83.24.152.174
X-Trace: 1305638829 unt-rea-b-01.news.neostrada.pl 2444 83.24.152.174:1514
X-Complaints-To: a...@n...neostrada.pl
Xref: news-archive.icm.edu.pl pl.comp.www:398845
[ ukryj nagłówki ]
Witam,

Chciałem zrobić na stronie 3-kolumnowy layout, przy czym szerokość środkowej
kolumny ma być zmienna, szerokości kolumn lewej i prawej mają być stałe, a
ponadto zawartość środkowej kolumny ma być horyzontalnie wycentrowana.

Gdy robię w sposób, jak przedstawiono poniżej, to nie jest dobrze. Zawartość
środkowej kolumny nie jest wycentrowana w poziomie, ponadto tło kolumny
obejmuje tylko napis, a nie całą kolumnę.
Ilustracja graficzna poniższego kodu:
http://img811.imageshack.us/img811/362/55532874.png

<html>
<head>
<style type="text/css">
.container {
background-color: red;
padding: 20px;
text-align: center;
}

.left {
position: relative;
float: left;
width: 200px;
background-color: pink;
}

.center {
position: relative;
float: left;
text-align: center;
background-color: orange;
}

.right {
position: relative;
float: right;
width: 200px;
background-color: yellow;
}

.clear {
clear: both;
}
</style>
</head>

<body>
<div class="container">
<div class="left">uu</div>
<div class="right">cc</div>
<div class="center">rr</div>
<div class="clear"></div>
</div>
</body>
</html>

Wymyśliłem coś innego. Gry robię w sposób, jak zaprezentowany poniżej, to
wygląda OK (właśnie taki efekt wizualnie chciałem uzyskać). Ale nie wiem,
czy to jest sposób poprawny i najlepszy. Należy zauważyć, że kolumna
środkowa tak naprawdę rozciąga się na całą szerokość containera, ale jest
przykryta przez kolumny lewą i prawą. Proszę o pomoc, jak prawidłowo
zrealizować to, o co mi chodzi.
Ilustracja graficzna poniższego kodu:
http://img815.imageshack.us/img815/7561/29696081.png

<html>
<head>
<style type="text/css">
.container {
width: 650px;
background-color: red;
padding: 20px;
text-align: center;
}

.left {
position: relative;
float: left;
width: 200px;
background-color: pink;
z-index: 100;
}

.center {
position: relative;

text-align: center;
background-color: orange;
z-index: 99;
}

.right {
position: relative;
float: right;
width: 200px;
background-color: yellow;
z-index: 100;
}

.clear {
clear: both;
}
</style>
</head>

<body>
<div class="container">
<div class="left">uu</div>
<div class="right">cc</div>
<div class="center">rr</div>
<div class="clear"></div>
</div>
</body>
</html>

Z góry dziękuję za pomoc.
Robbo