[HTML] położenie obiektów DIV Opcje

[xajart]

Witam.

Mam pytanie skierowane do osób które projektują strony na DIV'ach (zapewne większość). 

Chodzi mi mianowicie jak wy to robicie. Ja obecnie projektuje strony w sposób (który mnie nie zadawala, bo czasami są problemy z ich ustawieniem) a mianowicie wykorzystuje do tego CSS, ponieżej postaram się zobrazować takowy przykład:



plik CSS

Kod

center {
  position: absolute;
  margin: 0 auto;
  width: 980px; 
}
head {
  position: relative;
  height: 200px;
  width: 980px;
  background-image: (url: jakis_obrazek);
}
contents {
  position: relative;
  width:  970px;
  padding: 5px;
}
footer {
  position: relative;
  ...
}

plik HTML (w kodzie PHP)

Kod

<div class="center">
  <div class="head"></div>
  <div class="contents"></div>
  <div class="footer"></div>
</div>

W kodzie mogą być błędy bo pisałem go z głowy. 
Chodzi o to, że wszystko jest okej, ale kiedy próbuje np w DIV'ie contents budować treść na kilku divach (w stylu: nagłowek, treść, stopka czy inne pierdółki potrzebne na stronie), to już position absolute i relative były wykorzystane wyżej i ustawienie poszczególnych elementów używajac znowu relative czy float, czasami rozwala szablon zwłaszcza na różnych przeglądarkach i czasami ustawienie takiej templatki zajmuje mi cały dzień by poprawnie wyświetlała we wszystkich przeglądarkach, co gorsze kiedy jeden z divów ma ustawiona wartość auto (bo będzie się zmieniał w zależności od treści, a następujący po nim div (ustawiony poprzez float) ma też wartość auto, to kiedy jeden z nich będzie mniejszy od drugiego wówczas div który jest poniżej rozwala szablon przesuwajac wszystko. Opcji absolute nie mogę użyć bo jak użyję to bedzie poza divem center.


Znacie jakieś rozwiazania na to jak poprawnie to deklarować. No i czy można np DIVowi zadeklarować minimalną wartość dla DIV'a która powinnien mieć w wysokości ale kiedy ją przekroczy to by autoskalowanie się włączyło. A może rozwiązać to na zasadzie wstawienia w jeden DIV dwóch Divów, nakładajac je na siebie, jeden żeby miał ustawioną określoną wysokość (ale był ukryty), a na wierz drugi który będzie wyświetlał treśc ale będzie miał ustawioną opcję autoskalowalności (jak nadrzędny), wówczas to się będzie zmieniać tak jak chce (ale nie wiem czy przy takim rozłożeniu divow jest to do wykonania). Ale wtedy pojawia się kolejny problem ze skomplikowaniem kodu i używaniem dużej ilości DIVów zagniezdzonych. A z tego co wiem to im więcje się ma tych DIVów pozagnieżdzanych tym trudniej panować nad efektem wizualnym strony, by się nie rozjezdzał.

Macie jakieś propozycje jak to rozwiązać jest najlepiej?

[xajart]

Czyli mówicie że się tym nie przejmować że budowanie templatki od podstaw zajmuje mi czasami cały dzień (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Z tym rozjezdzaniem DIV'ów, to na ostatnim szablonie miałem taki problem:

div nadrzędny (np contents) zawiera w sobie 5 divów:



DIV1 | DIV 2
DIV1 | DIV 3
DIV4-| DIV 5

DIV 1 => widht: 600px; height: auto; (no i tutaj musiałem na sztywno zadeklarowąc wysokość)
DIV 2 => widht: 300px; height: 30px;
DIV 3 => widht: 300px; height: 50px;
DIV 4 => widht: 80px; height: auto;
DIV 5 => widht: 900px; height: auto;

No i problem był przy DIV 1, bo kiedy była wartość automatyczna i przekroczyła ona wysokość 80px (równą sumie wysokości DIV 2 i DIV 3). to DIV 4 wskakiwał mi pod DIV 3. Przez co rozwalało mi cały szablon, ale co dziwniejsze tylko w IE. Ale z tego co obczaiłem to opcje float: left, right mi taki cyrk odwalały.

Pewnie  problemu by z tym nie było gdybym rozbił to na dwa obiekty w których były by zagnieżdzone odpowiednio w pierszywm (1, 2 i 3) zaś w drugim (4 i 5 - z tym że obiekt piąty miałby kolejne obiekty w sobie pozagnieżdzane). 

Ale z tego co piszecie, to rozumie że nie ma się co bać wielokrotnego zagnieżdzania obiektów w sobie, pod warunkiem by najpierw dobrze ustawiać nadrzędne.

a co do wartości min-height, max-height, min-width, max-width - to takich eksperymentów nie chc używać, bo Skie jak sam napisałeś jest problem z tym pod IE.  


erix  - wiem ale jak masz obiekt center który ma służyć za wycentrowanie w poziomie templatki strony to trzeba mu nadać pozycje absolutną, zaś pozostałe obiekty już nie muszą mieć tej relatywnej bo z tego co mi się wydaje domyślnie ją mają (bo czy jest zadeklarowana czy nie to efekty na ogól są takie same). Chociaż kiedyś miałem taki dziwny bład, ze kiedy obiekt miał opcję float bez ustawienia pozycji na relative to wywalało mi go z obiektu centralnego, kiedy usuwałem float to był w centralnym, ale jak mu ustawiłem float i zadeklarowalem pozycje na relatywna to dalej byl w centralnym obiekcie. Wiem że wtedy na łatwizne poszedłem bo powinnienm szukać problemu powyżej, no ale byłem wówczas ograniczony czasowo by się w to bawić.