Placera elementen korrekt
Tjena
Ta en titt på nedanstående test. Som ni ser så hoppar den röda och den blåa boxen ut från sin "moder" (pga av float) och puttar därför inte ner den 2 pixel tjocka svarta bordern... man ser den om man tittar under den gråa rutan.
Några förslag på hur man löser det på absolut snyggaste sätt så det funkar i Win/IE och Mozilla (Safari, Opera, Mac/IE etc är bara bonus om det funkar.. primärt är jag bara intresserade av de två första!)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<html lang="sv-SE"><head> <title>Float test</title> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } body { font-family: verdana, tahoma, arial; font-size: 80%; text-align: center; } #container { background-color: #fff; border: 2px solid #000; font-size: 0.85em; margin: 20px auto; text-align: left; width: 800px; } #wrap { border-bottom: 2px solid #000; padding: 2px; } #top { background-color: #ccc; height: 82px; margin: 0 0 2px 0; } #left { background-color: #f00; float: left; height: 192px; margin: 0 2px 0 0;; padding: 0; width: 581px; } #right { background-color: #00f; float: right; height: 192px; margin: 0; padding: 0; width: 213px; } #bottom { padding: 15px; } </style></head><body> <div id="container"> <div id="wrap"> <div id="top"></div> <div id="left"></div> <div id="right"></div> </div> <div id="bottom">sss</div> </div></body></html> |
Svara
Sv: Placera elementen korrekt
Hej!
Ett bra trick är att efter några floats som finns men ändå inte finns lägga till en div eller span beroende på smak tycke och önskad effekt med clear
så
<div id="wrap">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</div>
blir istället
<div id="wrap">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div class="clear"> </div>
</div>
med .clear { clear: both; } i style
MVH Jonas
Svara
Sv:Placera elementen korrekt
Jonas,
Tack för förslaget. Testade det tidigare, men botten marginalen blir inte bra i IE, den blir för stor =/
Svara
Sv: Placera elementen korrekt
Om du ska ha fast höjd på wrappen så går det att fixa :)
Kolla in www.egenart.org/andreas
/Jonas
Svara
Sv:Placera elementen korrekt
Jonas,
Det ska jag iofs ha =) Vad finns det mer för alternativ än att klämma in extra HTML? Vill undersöka alla möjligheter =)
EDIT: Om IE hade haft bättre stöd för pseudo-klasser så hade jag kunnat använda det, men jag syftar på Win/IE + Mozilla kompatibel lösning.
Svara