Jag har gjort en ganska simpel layout med tre divar som utgör varsin kolumn, men i en av kolumnerna vill jag placera ytterligare två divar, en högst upp och en längst ned (se skiss). Går detta att åstadkomma? Hur trycker jag ner den undre diven i botten? Absolut positionering är inget alternativ eftersom layouten ska vara "flytande".
Vertikal placering
4 svar · 471 visningar · startad av Skarre
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>layout</title>
<style type="text/css">
html, body { margin:0; padding:0; height:100%; }
.col { float:left; width:33.3333%; height:100%; position:relative; /* ange en "containing block" */ }
.top { background:lime; }
.bottom { position:absolute; bottom:0; left:0; width:100%; background:yellow; }
</style>
</head>
<body>
<div class="col">
left
</div>
<div class="col">
<div class="top">
top
</div>
<div class="bottom">
bottom
</div>
</div>
<div class="col">
right
</div>
</body>
</html>
Jag kanske ska förtydliga. De tre kolumnerna är placerade inuti en layout som är flytande i höjdled. D.v.s. sajten blir bara så hög som innehållet kräver. Höjden på kolumnen där de två inre kolumnerna ska placeras uppe och nere är alltså inte fast. Det bör också vara åtminstone XHTML 1.0 Transitional.
Jag förmodar att det jag är ute efter är i princip omöjligt, vilket jag också meddelat kunden som hade detta önskemål. Tack för att du försökte dock, Zcorpan!
raderade den förra och lagt dit en ny!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title></title>
<style type="text/css">
<!--
#col1{ width: 30%; float: left;}
.in{ background-color: #BEBEBE; margin: 0 1em; }
#col2{ width: 30%; background-color: #BEBEBE; float: left; padding: 0.3em }
#col3{ width: 30%; float: left; }
#head{ width: 100%; background-color: #797979; }
#main{ width: 100%; background-color: transparent;}
#fot{ width: 100%; background-color: #797979; }
-->
</style>
</head>
<body>
<div id="col1" class="in">kolumn 1</div>
<div id="col2"><div id="head">kolumn 2</div><div id="main">mitten</div><div id="fot">foten</div></div>
<div id="col3" class="in">kolumn 4</div>
</body>
</html>
En enkel variant på det du ville, där allt styrs av innehållet. Vill du att allt ska se ut som det är lika högt, lägger du till en div runt alltihop med t.ex en bakgrundsfärg med border eller något liknande.