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

Data: 2011-05-17 13:27:19
Temat: CSS, 3-kolumnowy layout, centrowanie zawartości środkowej kolumny
Od: "Robbo" <y...@m...com> szukaj wiadomości tego autora
[ pokaż wszystkie 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