float opfører sig underligt
Jeg har en side der skal stille op med øverst en lang tværgående div-boks.Herunder skal der laves 2 kolonner, hvor den første kolonne er 2 rækker, og kolonnen ved siden af er 1 enkelt række.
Det kunne hurtigt laves vha. en html-table som:
<table border=1>
<tr>
<td>øverste venstre</td>
<td rowspan=2>højre kolonne</td>
</tr>
<tr>
<td>Nederste venstre</td>
</tr>
</table>
Men jeg vil gerne have lavet det via styles, og jeg har problem med at den nederste venstre kolonne rykker ned så den flugter med nederste linie af den højre kolonne.
Jeg kan ikke forstå hvorfor den gør det da jeg har bedt den om at floate til venstre.
Min kode er som følger:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title></head>
<body>
<style>
#introtext{
float:left;
border:solid 1px red;
width:100%;
}
#productselect{
float:left;
border:solid 1px green;
width:100px;
}
#productinfo{
float:left;
border:solid 1px yellow;
width:10px;
clear:none;
}
#pricecompare{
float:left;
border:solid 1px blue;
width:590px;
}
</style>
<div style="width:697px;">
<div id="introtext">introtext</div>
<div id="productselect">productselect</div>
<div id="pricecompare">pricecompare<br>fylder 2<br>herj<br>jhhj</div>
<div id="productinfo">productinfo</div>
</div>
</body>
</html>
Som sagt så bliver productinfo rykket ned. men den skal rykkes op så jeg får samme udseende som den tabel giver.
Håber jeg har skrevet forståeligt.
Mvh...
