Forum PHP.pl > [css] Blok nie rozszerza się automatycznie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css] Blok nie rozszerza się automatycznie

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Jarod

17.08.2006, 15:33:27

Może mi ktoś wytłumaczyć co robię źle? Pod FFi Operą wyświetla się źle. Natomiast IE wyświetla dobrze.

html:

[HTML] pobierz, plaintext 
<html>
  <body>
 
      <div id="kontener">
          <div class="naglowek1">Nagłówek 1</div>
          <div class="naglowek2">Nagłówek 2</div>
 
         <div class="lewakolumna">Lewa kolumna</div>
          <div class="prawakolumna">Prawa kolumna<br><br><br><br><br><br><br></div>
	  </div>
 
  </body>
</html>
[HTML] pobierz, plaintext

css:

[HTML] pobierz, plaintext 
* {
   margin: 0 auto;
   padding: 0;
}
div#kontener {
              width: 775px !important;
              width: 777px;
              color: black;
              background-color: green;
	      border: 1px black solid;
}
.naglowek1 {
            width: 387px;
            color: #FFFFFF;           
            background-color: red;
            float: left;
}
.naglowek2 {
            width: 388px;
            color: #FFFFFF;           
            background-color: yellow;
            float: left;
}
.lewakolumna {
              width: 100px;
              color: black;
              background-color: yellow;
              border: 1px black solid;
              float: left;
}
.prawakolumna {
               width: 100px;
               color: black;
	       background-color: yellow;
               border: 1px black solid;
               float: left;
}
[HTML] pobierz, plaintext

Załączam obrazek z FF i IE. Zobaczcie co się dzieje. Kontener się nie rozszerza.

--FF--
--IE--

Pomaga dołożenie <div style="clear:both;"></div> po bloku prawa kolumna ale nie rozumiem dlaczego muszę takie sztuczki stosować

mike

17.08.2006, 16:01:09

Dodaj do div#kontener takie coś: overflow: auto;

Jeśli kontener zawiera elemety floatowane to nie rozciąga się domyślnie na ich wysokość/szerokość.
Robi to tylko jeśli elementy nie są floatowane.

Cytat

Pod FFi Operą wyświetla się źle. Natomiast IE wyświetla dobrze.

Odwrotnie.
badzIEwIE nadinterpretowuje style. Powinno być tak jak w FF i Operze.

Jarod

17.08.2006, 19:40:48

Cytat(mike_mech @ 17.08.2006, 15:01 )

Byłem przekonany, że auto jest ustawione domyślnie.

Cytat(mike_mech @ 17.08.2006, 15:01 )

Odwrotnie.
badzIEwIE nadinterpretowuje style. Powinno być tak jak w FF i Operze.

Dziękuje. Działa.

Zajec

17.08.2006, 20:42:18

Rozszerzenie jak sama nazwa wskazuje dot. szerokości ;-)

Możesz też sobie użyć

Kod

#kontener:after { display: block; content: ""; clear: both; }

choć przyznaję, że rozwiązanie mike_mech'a jest przyjemniejsze. Swoje tak tylko do kompletu dodałem :-)

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.