Forum PHP.pl > [CSS] div, autodopasowanie kolumn

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] div, autodopasowanie kolumn

wiciu010

29.08.2008, 17:10:54

Mam taki kod:

Kod

body, html {

    background-color: #484848;

    text-align:center;

    font-family:verdana;

    font-size:11px;

    color:#525252;

    line-height:15px;

}

#content_left {

        text-align: left;

        float:left;

        width: 280px;

        min-height: 514px;

        border: 0px solid black;

        background-color: #FFFFFF;
}

#content_right {

        text-align: left;

        float:left;

        width: 670px;

        min-height: 514px;

        border: 0px solid black;

        background-color: #FFFFFF;
}

W content_right treści zmienia się dynamicznie i czasami height wynosi 514px a czasami 1000px jak zrobić żeby content_left dopasowywał się automatycznie i miał taki sam height? Musi działać pod FF, IE, Opera

ferrero2

29.08.2008, 23:13:46

Zrób tak :

Kod

body, html {
/*dodaj marginesy i paddingi */

margin:0;
border:0;
padding:0;
     background-color: #484848;

     text-align:center;

     font-family:verdana;

     font-size:11px;

     color:#525252;

     line-height:15px;

}

/* stwórz kontener o łącznej szerokości tych dwóch  */

#container
{
margin:0 auto; /* środkujesz kontener  */
border:0;
padding:0;
width:950px;
         background-color: #00f; /* koniecznie takie samo jak div bez zmienianejtreści U nas content_left  */
}

/* tutaj również pododawaj padding margin border  */

#content_left {

margin:0;
  padding:0;

         text-align: left;

         float:left;

         width: 280px;

         min-height: 514px;

         border: 0px solid black;  /* po co określasz parametry obramowania które nie istnieje :D  */

         background-color: #00f; /* modyfikuje w celu pokazania efektu  */
}

#content_right {

margin:0;
  padding:0;

         text-align: left;

         float:right; /* zmiana z left na right  */

         width: 670px;

         min-height: 514px;

         border: 0px solid black;  /* po co określasz parametry obramowania które nie istnieje :D  */

         background-color: #f00;   /* modyfikuje w celu pokazania efektu  */
}

#clear_all {
clear:both;
padding:0;
margin:0;
background:#fff;
        }

To taka sprytna sztuczka że mamy wrażenie że menu też się rozszerza, a tak naprawdę rozszerza się tylko element z textem.

Teraz HTML :

Kod

<body>
<div id = "container">
     <div id = "content_left">tutaj menu</div>
     <div id = "content_right">tutaj text</div>
    <div id = "clear_all">&copy Mariusz</div>
</div>
</body>

U mnie wszystko pięknie działa

Pozdrawiam

EDYTOWAŁEM POST BO POPRZEDNI ZAWIERAŁ BŁĘDY

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.