[CSS] 3 kolumny

[Egree]

Mam pewien problem, nie bardzo wiem, jak mogę z niego wybrnąć. Coś takiego:

Kod: Zaznacz cały

<div id="externals_menu">

<div id="del_icio_us">
<h2><a href="">...</a></h2>
<ul>
<li><a href="">...</a></li>
</ul>
</div>

<div id="flickr">
<h2><a href="">...</a></h2>
<ul>
<li><a href="">...</a></li>
</ul>
</div>

<div id="last_fm">
<h2><a href="">...</a></h2>
<ul>
<li><a href="">...</a></li>
</ul>
</div>

</div>

ma mi wyświetlać trzy kolumny, których przeznaczenia nie trudno się domyślić - jedna z obrazkami, dwie z odnośnikami. Same kolumny są pionowe, mają wyświetlać się obok siebie. Coś takiego:

Kod: Zaznacz cały

================================================
*   ..........     ..........     ..........   *
*   ..........     ..........     ..........   *
*   ..........     ..........     ..........   *
*   ..........     ..........     ..........   *
*   ..........     ..........     ..........   *
*   ..........     ..........     ..........   *
*   ..........     ..........     ..........   *
*   ..........     ..........     ..........   *
*   ..........     ..........     ..........   *
================================================

Oto fragment pliku styli:

Kod: Zaznacz cały

#externals_menu ul, #externals_menu li{
margin: 0;
padding: 0;
list-style: none;
}

#del_icio_us {
width: 30%;
margin-left: 0;
}

#flickr {
width: 30%;
margin-left: 30%;
}

#last_fm {
width: 30%;
margin-left: 60%;
}

Niestety listy nie wyświetlają się w poziomie, druga jest niżej od pierwszej, trzecia od drugiej, przypomina to schodki. Oto zrzut ekranu. Jakieś pomysły?

[Tomek]

hm... nigdzie nie widzę float - więc jak to ma się otaczać?

[Egree]

Float daje raczej dziwne efekty.

Kod: Zaznacz cały

#footer {
clear: both;
background: #fffacd;
}

#del_icio_us {
width: 30%;
float: left;

}

#flickr {
width: 30%;

float: left;
}

#last_fm {
width: 30%;

float: right
}

Przy powyższym wszystko jest w porządku, ale nie jest wyświetlany kolor tła, jak na zrzucie ekranu. Z kolei np. takie coś: (bez float: left we #flickr)

Kod: Zaznacz cały

#footer {
clear: both;
background: #fffacd;
}

#del_icio_us {
width: 30%;
float: left;

}

#flickr {
width: 30%;
}

#last_fm {
width: 30%;

float: right
}

daje coś takiego.

[riddle]

Nie ma tła, bo wybiłeś bloki z flowu dokumentu i parent div ma 0 wysokość = nie ma tła. Rozwiązanie: 1, XHTML oraz 2, CSS

[Egree]

Dzięki, poradziłem sobie w taki sposób:

Kod: Zaznacz cały

#del_icio_us {
width: 30%;
float: left;
background: #ecd814;
}

#flickr {
width: 40%;
float: left;
background: #ffe4c4;
}

#last_fm {
width: 30%;
background: #9bcdbc;
float: right;
}


Jakimś cudem działa.