[CSS] Kilka divów w 1 divie - chocby ich nie było Opcje

[3miel]

Witam,

mam problem, poniewaz mam jeden glowny DIV (srodek). W nim mam umieszczone 3 wewnetrzne: lewa, srodkowa i prawa.

Gdy ustawie border:1px na ten glowny div to w Firefoxie traktuje to, jak by te 3 poddivy byly poza nim! Dlaczego tak jest? co mam zrobic? probowalem z display:block, position... ale bez skutku..

Proszę o pomoc bo juz siły nie mam.

[mike]

Zacznijmy od podstaw XHTMLa:

[HTML] pobierz, plaintext 
<style type="text/css">
div#example1 {
    width: 200px;
    height: 200px;
    border: 1px;
}
</style>
<div id="example1"></div>
[HTML] pobierz, plaintext 

Pytanie: Jakie wymiary ma blok example1 ?
Odpowiedź: To zależy (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
IE: 200x200px
FF, Opera: 202x202px (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Stąd czasem nieścisłości. Oki, to może się przydać, lećmy dalej.

To co chcesz zrobić to:

[HTML] pobierz, plaintext 
<style type="text/css">
div#container {
    margin: auto;
    width: 600px;
    overflow: auto;
}
 
div#leftColumn, rightColumn {
    float: left;
    width: 150px;
    height: 200px;
    background-color: #f00;
}
 
div#middleColumn {
    float: left;
    width: 300px;
    height: 400px;
    background-color: #0f0;
}
</style>
<div id="container">
  <div id="leftColumn"></div>
  <div id="middleColumn"></div>
  <div id="rightColumn"></div>
</div>
[HTML] pobierz, plaintext 

Wszystko pasuje i przylega.
Ale jak teraz dodasz obramowania ... to w związku z tym od czego zacząłem, w IE będzie to czego się spodziewasz a w FF/Opera bloki polecą na dół.

Oczywiście nie muszę mówić że to FF/Opera poprawnie interpretują kod XHTML a "błędy" wynikaja z tego że koderzy przyzwyczaili się porównywać wszystko do IE (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Mam nadzieję że o to chodziło i wystarczająco naświetliłem sprawę.


P.S.
Pisane z palca i nie testowane, mogła wkraść się literówka.