[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.

[batman]

Pokaż kod, który powoduje "wyjeżdżanie" div-ów, to coś się na to poradzi

[MatheW]

daj na sam koniec głównego diva <br style="clear: both" /> lub inny znacznik z tym stylem.

[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
IE: 200x200px
FF, Opera: 202x202px

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

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.

[Saddam92]

wystarczy ze dasz

[HTML] pobierz, plaintext 
<style type="text/css">
div#container {
margin: auto;
width: 602px; /* o 2 pixele wiekszą szerokość ustawiasz dla FF i OPERY */
overflow: auto;
border: 1px; /* dodajesz ramke */
}
</style>
[HTML] pobierz, plaintext 

i teraz najważniejsza część programu

[HTML] pobierz, plaintext 
/* hack dla internet explorera */
/*\*/
* html div#container {
width: 600px; /* dla IE zmniejszasz szerokość do poprawnej */
}
/**/
[HTML] pobierz, plaintext 

To powinno zadziałać z przykładem podanym przez mike_mech, a jeśli nie to zerknij jeszcze tutaj: http://www.webtips.pl/post6163.html

Pozdrawiam

[mike]

~Saddam92 z tym że mój przykład zadziała w zupełności sam.
A Twoje to jakieś dziwolągi niezgodne z żadnym standardem.

Stosowanie hack'ów to bardzo zły nawyk.
Odradzam je w całości.

[Zajec]

Ludzie, myślicie czasem co piszecie?

Przecież koleś ma problem z tym, że dla IE float nie wyciąga elementu z biegu dokumentu. Jedno z poprawnych rozwiazań przedstawił na początku MatheW, a wy gadacie o czymś zupełnie nie związanym z problemem.

Co więcej, nawet nie wiecie czy 3miel na pewno nie ma DOCTYPE w dokumencie. A może właśnie zrobił XHTML strict i IE traktuje BoxModeling normalnie?!


@3miel najprościej dodać do elementu zawierającego

Kod

overflow: auto;