Tjena Hej! Jonas, Om du ska ha fast höjd på wrappen så går det att fixa :) Jonas,Placera elementen korrekt
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!)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<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>
Sv: Placera elementen korrekt
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 JonasSv:Placera elementen korrekt
Tack för förslaget. Testade det tidigare, men botten marginalen blir inte bra i IE, den blir för stor =/Sv: Placera elementen korrekt
Kolla in www.egenart.org/andreas
/JonasSv:Placera elementen korrekt
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.