Forum PHP.pl > [HTML][CSS] Nie działą wyrównanie div-ów

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Nie działą wyrównanie div-ów

raptorx

25.11.2008, 13:24:53

Witam,

przeszukując wujka google w poszukiwaniu rozwiązania mojego problemu dot. wyrównania div-ów znalazłem takie coś:

Kod

#menulewe { width: 153px; padding-bottom: 2000px; margin-bottom: -2000px; }
#tresc { width: 480px; padding-bottom: 2000px; margin-bottom: -2000px; }
#menuprawe { width: 148px; padding-bottom: 2000px; margin-bottom: -2000px; }

lecz u mnie po zmianie danych nie działa.

Kod mojej strony wygląda następująco:

[HTML] pobierz, plaintext 
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="author" content="UG Kochanowice">
    <link rel="Stylesheet" type="text/css" href="style.css">
    <title>GOPS</title>
</head>
<body>
    <div id="top">
        <div id="logo">
            logo
        </div>
        <div id="kontenersrodek">
            <div id="menulewe">
                menu
            </div>
            <div id="tresc">
                tresc klfdskfksdjk kkldskfkld skfjldjskfj ksdjfio sdklfjkldsjfl 
                skldfjksjl df sdjkfjdksfjfkljkJKFJ KdjklJk 
                dfksdjklfsdkljfkld
                fsdjkf;sdf
                dsjf'
            </div>
            <div id="menuprawe">
                menu 1
            </div>
        </div>
        <div id="stopka">
            stopka
        </div>
    </div>
</body>
</html>
[HTML] pobierz, plaintext

Kod cssa:

Kod

html, body {
    background-color: #fff;
    color: #000;
}

#top {
    width: 800px;
    margin: 0 auto;
    padding-top: 20px;
}

#logo {
    width: 798px;
    background-color: #888;
    border: solid 1px #000000;
    height: 200px;
}

#kontenersrodek {
    text-align: left;
}
#menulewe{
    width: 153px;
    float: left;
    overflow: hidden;
    background-color: #ccc;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    padding-left: 5px;

}

#menuprawe {
    width: 148px;
    float: right;
    overflow: hidden;
    background-color: #ccc;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
}

#tresc {
    width: 480px;
    padding-left: 5px;
    padding-right: 5px;
    float: left;
    overflow: hidden;
    background-color: #fff;
    min-height: 50px;
}

#stopka {
    clear: both;
    width: 798px;
    background-color: #888;
    border: solid 1px #000000;
}

#menulewe { width: 153px; padding-bottom: 2000px; margin-bottom: -2000px; }
#tresc { width: 480px; padding-bottom: 2000px; margin-bottom: -2000px; }
#menuprawe { width: 148px; padding-bottom: 2000px; margin-bottom: -2000px; }

Poniżej prezentuję screen tej strony:

erix

25.11.2008, 15:56:56

Cytat

lecz u mnie po zmianie danych nie działa.

Czyli co się dzieje? Wysadza w powietrze komputer?

raptorx

25.11.2008, 17:15:55

Cytat(erix @ 25.11.2008, 15:56:56 )

Czyli co się dzieje? Wysadza w powietrze komputer?

Raczej nie równa ? Dodatkowo dołączyłem screen. Divy się robią długie tak, że końca nie widać.

piotrooo89

25.11.2008, 17:26:06

jak ustawiłeś takie paddingi to się nie dziwie... padding-bottom: 2000px; to jest kawałek...

raptorx

25.11.2008, 17:27:46

To jakie ustawić ? Na wcześniejszej stronie takie ustawiłem i było wszystko ok, a tutaj się przedłuża w nieskończoność. A chodzi mi tylko o wyrównanie przy większej ilości tekstu.

piotrooo89

25.11.2008, 17:29:54

ustaw np.: height: auto; min-height: 400px;

erix

25.11.2008, 18:01:22

~piotrooo89, to nie o to chodzi z paddingami; to jest coś w stylu faux columns.

~raptorx: poczytaj: http://www.alistapart.com/articles/holygrail

raptorx

26.11.2008, 10:08:31

Cytat(erix @ 25.11.2008, 18:01:22 )

~piotrooo89, to nie o to chodzi z paddingami; to jest coś w stylu faux columns.

~raptorx: poczytaj: http://www.alistapart.com/articles/holygrail

Dziękuję Wam za pomoc. Rozwiązałem problem z linku erix'a.

Pozdrawiam

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.