Vertikal placering

4 svar · 471 visningar · startad av Skarre 15 maj 2006

SkarreMedlem sedan apr. 20012 427 inlägg

Frågan15 maj 2006 12:43#1

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".

http://member.webforum.nu/1826/skiss.gif

zcorpanMedlem sedan dec. 20042 245 inlägg

15 maj 2006 13:55#2

<!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>

SkarreMedlem sedan apr. 20012 427 inlägg

16 maj 2006 11:42#3

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.

SkarreMedlem sedan apr. 20012 427 inlägg

16 maj 2006 23:12#4

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!

tantenMedlem sedan nov. 20051 596 inlägg

17 maj 2006 06:44#5

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.