Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[css] 3 kolumny źle wyświetlane w firefoxie

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

[css] 3 kolumny źle wyświetlane w firefoxie

Post 17.04.2007, 10:44:12

Próbuję zrobić layout trój-kolumnowy, ale trochę inny:
prawa kolumna to tak naprawdę dwa boxy jeden pod drugim,
lewa kolumna jeden div ale zagnieżdzony(kod poniżej).

Prawą kolumnę uzyskuję poprzez: float: right w obu boxach oraz clear: right w dolnym. Oba boxy ustawiają się dobrze jeden pod drugim.
W lewej stosuję float:left.

W IE wszystko się wyświetla poprawnie, natomiast w firefoxie lewa kolumna zaczyna się dopiero pod pierwszym prawym divem.

Czy robię gdzieś błąd czy firefox robi błąd?

Kod:
Kod: Zaznacz cały
<html xmlns="http://www.w3.org/1999/xhtml"" xml:lang="pol-PL" lang="pol-PL">
<head>
<style>
#container {
  background-color:#0ff;
}
#content {
    background-color:#0ff;
}
#main {
    margin-left: 150px;
    margin-right: 150px;
}
#right {
    background-color:#f00;
    width: 150px;
    float: right;
}
#right2 {
    background-color: #ee0;
    width: 150px;
    float: right;
    clear: right;
}
#left {
    background-color: #c0c;
    width: 150px;
    float: left;
    margin-top: 0px;
}
</style>
</head>
<body>
    <div id="container">
    <div id="right">
        float prawy raz
        <br/>
        float
    </div>
    <div id="right2">
        float prawy dwa
        <br/>
        float
    </div>
    <div id="content">
        <div id="left">
            float lewy raz
            <br/>
            float
        </div>
        <div id="main">
            Srodek
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
            Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
            Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
            euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
            Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
            purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
        </div>
    </div>
    </div>
</body>
</html>
kragg
Posty: 4
Dołączył(a): 12.04.2007

Post 17.04.2007, 17:49:51

witam,
przenies #left na sam poczatek #container, usun #main bo jest zbedny i daj margin na #content i bedzie git.

pozdrawiam,
joshrob
Posty: 32
Dołączył(a): 28.07.2006

Post 18.04.2007, 09:10:14

joshrob napisał(a):witam,
przenies #left na sam poczatek #container, usun #main bo jest zbedny i daj margin na #content i bedzie git.

pozdrawiam,


Nie bardzo mogę przenieść, ponieważ wtedy semantyka boksów została by całkowicie zniszczona. Kod który tutaj wkleiłem jest wyłącznie testowy, w rzeczywistym np. box lewy to "last-news".

Kluczowe pytanie: która przeglądarka zachowuje się w tej sytuacji zgodnie ze specyfikacją?
kragg
Posty: 4
Dołączył(a): 12.04.2007


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 1 gość

Hosting, Domeny, SSL

Subskrypcja

Mamy 51973 zarejestrowanych użytkowników.
Najnowszy użytkownik: Eddierob


Nasi użytkownicy napisali:

  • 938345 wiadomości
  • w 247865 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)