Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]float
Forum PHP.pl > Forum > Przedszkole
cycofiasz
Witam, mam kod

  1. <div id="header">
  2. <div style="width: 300px; float: left;">
  3. <a href="index.php"><img src="resources/logo.gif" /></a>
  4. </div>
  5. <div style="width: 600px; float: left;">
  6. <a href="index.php"><img src="resources/logo.gif"/></a>
  7. </div>
  8.  
  9. </div>


I jak zrobić, by ten div o id header zmieniał swoją wysokość zależnie od zawartości? Wiem że zadziała jeśli jemu też nadam float: left, ale czy nie da się jakoś inaczej?
_olo_1984
height: auto;
cycofiasz
Nie działa
hateman
  1. <div id="header">
  2. <div style="width: 300px; float: left;">
  3. <a href="index.php"><img src="resources/logo.gif" /></a>
  4. </div>
  5. <div style="width: 600px; float: left;">
  6. <a href="index.php"><img src="resources/logo.gif"/></a>
  7. </div>
  8. <div style="clear: both;"></div>
  9. </div>
hiszpanespaniol
Cytat
jak zrobić, by ten div o id header zmieniał swoją wysokość zależnie od zawartości?


sposób działający we wszystkich czołowych przeglądarkach:

  1. #header {
  2. height: auto !important;
  3. height: 1px;
  4. min-height: 1px;
  5. }


edit:
musisz dodać jeszcze to:

  1. overflow: hidden;
cycofiasz
Oczywiście na kochanym IE tylko nie działa
hiszpanespaniol
skoro pod ie nie działa, to dodaj kolejną definicję css:

  1. * html #header {
  2. overflow: visible;
  3. }


to jest dla ie6, bo pod 7 musi byc już dobrze.
mam nadzieję, że pomogłem

hateman też napisał coś o czym zapomniałem:

  1. .clear {clear: both}
  2.  
  3. <div class="clear"><!-- --></div>


musisz dać taki div na samym końcu, niestety innej rady nie znam gdy się stosuje float. komentarz w środku jest po to, aby div miał zerową wysokość w ie. Tym div'em może być np stopka albo coś

pozdrawiam
hateman
mój wcześniej podany sposób musi działać
sprawdzałem u siebie :]

Może chcesz jakiś inny efekt uzyskać?
Teraz dwa obrazki są obok siebie a "header" jest rozszerzony (tak jak chciałeś)
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.