[CSS]Float roznice w przegladarkach Opcje

[Crisu]

Witam!
Czy ktoś może mi wyjaśnić (najlepiej w toporny sposób) czemu używając floata, divy (kolumna1,kolumna2) wychodzą z głownego diva (czerwony)

Przykład FF:
http://img134.imageshack.us/img134/2567/ffdiv.jpg

Pod IE o dziwo działa wg założeń:
http://img148.imageshack.us/img148/8418/iediv.jpg

Sorki z góry, jeżeli temat się powtórzył ale nie jestem web designerem i szczerze nie cierpie grzebać w css..

Kod:

[HTML] pobierz, plaintext 
<div id="wrapper">
 
  <div id="tytul">tytul</div>
  <div id="podtytul">podtytul</div>
  <div id="col1">kolumna1</div>
  <div id="col2">kolumna2</div>
 
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
/* CSS Document */
 
#wrapper {
margin-left:30px;
border-style: solid ;
border-color:red;
width:500px;
}
 
#tytul {
margin-left:30px;
width:400px;
border-style: solid ;
border-color:green;
}
 
#podtytul {
margin-left:30px;
width:400px;
border-style: solid ;
border-color:yellow;
}
 
#col1 {
float:left;
margin-left:30px;
width:100px;
height:200px;
border-style: solid ;
border-color:aqua;
}
 
#col2{
float:right;
display:block;
margin-left:30px;
width:200px;
height:300px;
border-style: solid ;
border-color:orange;
}
[HTML] pobierz, plaintext 

Ten post edytował Crisu 18.05.2009, 20:54:53

[Crisu]

Ciekawy kurs, przejrzałem co ważniejsze i zrobiłem coś takiego.
Pytanie czy jest to poprawne rozwiązanie ? ( w sensie czy można to zrobić lepiej)
I czemu FF nie uwzglednia tych marginesów ?

IE:
http://img209.imageshack.us/img209/2228/iediv2.jpg
FF:
http://img209.imageshack.us/img209/2346/ffdiv2.jpg

[HTML] pobierz, plaintext 
<div id="wrapper">
 
  <div id="tytul">tytul</div>
  <div id="podtytul">podtytul</div>
 
  <div id="wrap2">
    <div id="col1">kolumna1</div>
    <div id="opis">opis</div>
  </div>
 
  <div id="col2">kolumna2</div>
  <div id="stopka">stopka</div>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
/* CSS Document */
 
#wrapper {
margin-left:30px;
border-style: solid ;
border-color:red;
width:500px;
}
 
#wrap2{
float:left;
border-style: solid ;
border-color: gray;
width:110px;
margin-left:15px;
}
 
#tytul {
margin-left:30px;
width:400px;
border-style: solid ;
border-color:green;
}
 
#podtytul {
margin-left:30px;
width:400px;
border-style: solid ;
border-color:yellow;
}
 
#col1 {
width:100px;
height:200px;
border-style: solid ;
border-color:aqua;
}
 
#col2{
float:right;
margin-left:30px;
width:200px;
height:250px;
border-style: solid ;
border-color:orange;
}
 
#opis{
width:100px;
height:100px;
border-style: solid ;
border-color:black;
}
 
#stopka{
margin-top:20px;
clear:both;
border-style: solid ;
border-color:pink;
}
[HTML] pobierz, plaintext