Floatolt tartalommal együtt nem nő a div mérete
Sziasztok.
Megkért egy ismerős, hogy csináljam meg az oldalát, amit CSS segítségével szeretnék megvalósítani, bár még nem nagyon ismerem.
Az a problémám, hogy a tartalommal együtt nem nyúlnak a divek. Egyszerűen nem tudom, miért nem.
Ha valaki segítene, nagyon hálás lennék. Ha pedig valamit nem jól csináltam, abban is várom tanácsaitokat.
Fko
■ Megkért egy ismerős, hogy csináljam meg az oldalát, amit CSS segítségével szeretnék megvalósítani, bár még nem nagyon ismerem.
Az a problémám, hogy a tartalommal együtt nem nyúlnak a divek. Egyszerűen nem tudom, miért nem.
Ha valaki segítene, nagyon hálás lennék. Ha pedig valamit nem jól csináltam, abban is várom tanácsaitokat.
Fko
#felso {
margin-left: auto;
margin-right: auto;
background-image: url(tuz.jpg);
width: 775px;
height: 367px;
}
#also {
margin-left: auto;
margin-right: auto;
width: 775px;
background-color: #475c9a;
border-top: dotted #fff 1px;
border-bottom: dotted #fff 1px;
}
#elso {
position: absolute;
width:170px;
min-height: 700px;
border-left: dotted #fff 1px;
border-right: dotted #fff 1px;
margin-left: 9px;
}
#masodik {
margin-left:180px;
height:auto;
min-height: 700px;
border-left: dotted #000 1px;
border-right: dotted #000 1px;
}
#harmadik {
float: left;
position: absolute;
width: 405px;
min-height: 700px;
}
#negyedik{
float:right;
width:190px;
border-left:dotted #000 1px;
min-height: 700px;
}
<div id="kontener">
<div id="felso">
</div>
<div id="also">
<div id="elso">
Menü lesz itt
</div>
<div id="masodik">
<div id="harmadik">
Ide jönne a tartalom
</div>
<div id="negyedik">
Ide még dobozok jönnek.
</div>
</div>
</div>
</div>
<div id="felso">
</div>
<div id="also">
<div id="elso">
Menü lesz itt
</div>
<div id="masodik">
<div id="harmadik">
Ide jönne a tartalom
</div>
<div id="negyedik">
Ide még dobozok jönnek.
</div>
</div>
</div>
</div>
IE
Gondolom Explorerben nézed. A min-height tulajdonságot ez a böngésző nem érti.
--
NP
Nem IE
Nem, ezt most Firefoxban néztem. De akkor mivel lehet ezt megoldani IE-ben?
Absolute
Az Internet Explorer kivédését többféleképpen lehet intézni. Általában az értelmesebb böngészőknél úgy működik, hogy a tároló divben (konténer) lévő divek szélességének összege egyenlő, a tároló div szélességével. IE-ben ez annyiban változik, hogy a bent lévő divek szélessége kissebb, mint a tárolóé. Javaslom még az overflow: hidden; tulajdonságot. Ha ezt használod, akkor nem fog szétesni a szerkezet, ha valami nagyobb, mint kéne.
üdv:
mefi
http://mefi.be
CSS - Clearing floats
http://www.quirksmode.org/css/clearing.html