LeonLMedlem sedan dec. 20025 871 inlägg Det eviga problemet med att stretcha en parent div. Har sökt i forumet men verkar inte ha hittat något som löser problemet. Jag har en stor div som omsluter tre mindre absolut positionerade divar:
#mainbox {
top: 193px;
bottom: 10px;
width: 940px;
position: absolute;
background-color: #fff;
}
#leftcolumn {
position: absolute;
width: 200px;
}
#middlecolumn {
width: 540px;
left: 200px;
position: absolute;
}
#rightcolumn {
left: 740px;
position: absolute;
width: 200px;
}
Sidan finns att kolla här: [url borttagen i och med löst problem]
Problemet är att den inte verkar vilja stretcha sig. Sätter jag en height för #mainbox på 100% så får jag ett litet vitt område som sträcker sig 170px (d.v.s. lika högt som #toppbild, eftersom det är det enda den har att gå efter, resten är absolut positionerade). Vad är det som jag inte har tänkt på? Har provat att sätta #mainbox på position: relative; men inte ens då sträcker innehållet ut diven (eftersom de är absolut positionerade). Sedan har jag provat att sätta position: relative; på de omslutna elementen, men dessa envisas då med att inte ligga sida vid sida.
Lösningar?
Nate.AMedlem sedan mars 2006296 inlägg Varför använder du position absoute? Om du istället positionerar med float slipper du problemet...
FrexuzMedlem sedan maj 2003138 inlägg float: left;
på left/middle/right, istället för position: absolute;
(width måste såklart fortfarande vara med)
när man använder floating så måste man se till så att man kör en "clear" efteråt.
enklast:
<div style="clear: both;"></div>
lägg den efter #right, före din avslutande div tag för #main. dock inte det bästa sättet.
bäst lösning finns här:
http://www.positioniseverything.net/easyclearing.html
(bara kopiera in sista kodstycket i din css)
då kan du göra såhär:
<div id="main">
<div id="top"></div>
<div id="wrapper" class="clearfix">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
</div>
-----------------------------------------------------
för att centrera #main bör du köra
margin: 0px auto 0px auto;
(top o bottom kan du ju ändra)
Danne VMedlem sedan aug. 20068 090 inlägg 1. Ta bort "position:absolute" och left/top ur alla stilar.
2. Lägg in "float:left" eller "float:right" på två av kolumnerna. Den tredje ska inte ha vare sig float eller position av något slag. Du måste också justera marginal åt vänster eller höger på alla kolumner så att det stämmer med bredderna. Se exempel.
Jag använder ofta text och/eller bakgrundsfärger när jag jiddrar med sånt hät för att det är enklare att se.
Vill man ha bakgrundsfärger eller att alla tre divvarna ska sträcka sig lika långt ner (dvs till botten av "mainbox") oavsett hur mycket innehåll dom har så brukar jag använda mig av ett ganska simpelt javascript från https://www.projectseven.com som beskrivs här: http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
(Faktiskt enklare att lägga in än vad man först tror)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="shortcut icon" href="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<style type="text/css">
#mainbox {
width: 940px;
background-color: #FFFF33;
margin:0px auto;
}
#leftcolumn {
width: 200px;
background-color: #FFCC33;
float: left;
}
#middlecolumn {
width: 540px;
background-color: #99FF66;
float: left;
}
#rightcolumn {
width: 200px;
background-color: #33CCCC;
margin-left: 740px;
}
.clear {
clear:both;
height:0px;
}
</style>
</head>
<body>
<div id="mainbox">
<div id="leftcolumn"><h1>Leftcolumn</h1>If the inverting-core acceptor deflects the
complex chronotron-feedback analysis, try to provoke a coil-composition
reflex and several quantum biosphere resonances, this will create a
restricted isovo</div>
<div id="middlecolumn"><h1>Middlecolumn</h1>If the inverting-core acceptor deflects the
complex chronotron-feedback analysis, try to provoke a coil-composition
reflex and several quantum biosphere resonances, this will create a
restricted isovo</div>
<div id="rightcolumn"><h1>Rightcolumn</h1>If the inverting-core acceptor deflects the
complex chronotron-feedback analysis, try to provoke a coil-composition
reflex and several quantum biosphere resonances, this will create a
restricted isovo</div>
<div class="clear"></div>
</div>
</body>
</html>
