Ułożenie szablonu

[xtaz]

Witam. Chciałbym zapytać jak ułożyć divy, aby w każdej przeglądarce wyglądały jednakowo? Próbowałem to rozwiązać w ten sposób:
// style css

Kod:

#news {
width: 800px;
min-height: 100px;
...
}

#panel_lewo {
width: 100px;
float: left;
min-height: 100px;
...
}

Analogicznie do tego tworzyłem panel prawo i osadzałem to w HTML w ten sposób:

Kod:

<div id="news">
<div id="panel_lewo">
TRESC PANELU
</div>
<div>

////////////////////

Ale pojawił się taki oto problem: Gdy rozszerzał się panel prawo(lewo) to panel news się nie rozszerzał. Więc chyba nie może to być zrobione tak, a ważne jest to, aby te divy się nie rozkraczyły. Proszę o pomoc

Poprawiłem sobie styl:

Kod:

#panel_prawy {
width: 100px;
min-height: 100px;
float: right;
margin-right: 300px;
background-color: white;
}

pod firefoxem wszystko gra.. ale pod IE już nie bardzo ;/

[razorskate]

Jeżeli divy o id panel_prawy i panel_lewy mają szerokości 100 px, mają ustawione floaty i są zagnieżdżone i w divie o id "news" to chyba tenże div nie powinien się rozszerzać, tylko pomieścić te dwa divy, i na treść zostaje Ci wtedy szerokość diva news mniejsza o szerokości divów panel_prawy i lewy. Mam nadzieję że dość jasno to opisałem ;] . Pozdrawiam.

PS. Kod pisz w znacznikach [code.] [/code.] (bez kropek) , wszystko będzie wtedy czytelniejsze ;D .

[xtaz]

wybacz, ale chyba źle mnie zrozumiałeś. Jak pewnie zauważyłeś każdy div ma wartość min-height. Skutkiem jej użycia jest to, że gdy np dla wartości tej podamy 20px; a wklejony tekst będzie miał 40px; to ten div się wydłuży. I gdy były one umieszczone w divie NEWS, to kiedy wydłużały się panele, to div news pozostawał taki sam, czego skutkiem było to, że najeżdżał on na stopkę i wystawał.

[razorskate]

Sprawdź jeszcze czy w Operze wszystko działa jak należy, wtedy będziesz miał pewność czy to wina tylko IE. Jeśli nadal nie będzie działać, poczytaj trochę o hackach w CSS do IE.

Ja na twoim miejscu zrobił bym to inaczej, tak:

1. Kod CSS:

Kod:

#panel_lewy {
width:20%;
min-height:100px;
float:left;
}

#news {
width:60%;
min-height:100px;
float:left;
}

#panel_prawy {
width:20%;
min-height:100px;
float:left;
}

2. Kod HTML:

Kod:

<div id="panel_lewy">
<!--Tekst w panelu lewym -->
</div>
<div id="news">
<!-- Teks w divie "news" -->
</div>
<div id="panel_prawy">
<!-- Tekst w panelu prawym -->
</div>

Mam nadzieję, że zrozumiałeś o co mi chodzi. Mowiąc krótko, nie zagnieżdżasz, tylko po kolei umieszczas divy w kodzie. Jako że div jest elementem blokowym, po nadaniu floatów, automatycznie ustawią się obok siebie, zapełniając cały ekran monitora. Można zmienić ilości procentowe, na inną wartość i nadać ograniczenia dla diva spinającego całość:

Kod:

max-width:1440px;
min-width:800px;

I wtedy cały układ nie będzie szerszy niż 1440px, ani nie zwęzi się do szerokości mniejszej niż 800px.
Mam nadzieję, że mnie zrozumiałeś
Pozdrawiam, Mikołaj.