http://www.alistapart.com/articles/fauxcolumns/
Många sätt att gå runt det här problemet går ut på att man sätter en bakgrund på wrapper-diven och låter kolumn-divarna vara genomskinliga.
Frågan#1
Har ett problem med mina <div>-taggar. Har sökt runt på wF utan att hitta någon tråd som tar upp just detta problemet. Kod och exempelsida bifogad. Jag vill att det gula och det blå lagret (#left och #right) ska nå ända ner till bottenlagret (#footer) oavsätt vilket av lagret som innehåller mest text. I exemplet nedan når #left ner till botten då det lagret innehåller mest text, medan #right avslutas direkt efter texten och når därför inte ner till #footer. Jag vill alltså att #right (eller #left om det lagret haft mindre textmassa än #right) ska fyllas ut till #footer oavsätt innehåll. Som det är nu fylls utrymmet ut av #main som är det bakomliggande lagret.
Någon som har förslag på hur det ska lösas? Har testat runt med lite olika height-varianter, och olika "wrap-divs", men får inte rätt på det.
Exempelsida: http://www.striberger.se/test.html
<!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" lang="sv" xml:lang="sv">
<head>
<title>Del Boca Vista</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Del Boca Vista" />
<style type="text/css" media="screen">
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
font-family: "Trebuchet MS", arial, helvetica, sans-serif;
font-size: 80%;
}
#wrap {
width: 600px;
margin: 0px auto;
text-align: left;
padding: 0em;
border: 1px solid #000;
background-color: #eee;
}
#head {
width: 580px;
margin: 0px auto;
text-align: left;
padding: 10px;
border-bottom: 1px solid #333;
background-color: #9C8C63;
color: #fff;
}
#main {
width: 600px;
margin: 0px auto;
text-align: left;
padding: 0em;
background-color: black;
position:relative;
}
#left {
float: left;
width: 430px;
margin: 0px;
text-align: left;
padding: 0em;
background-color: yellow;
}
#right {
width: 169px;
float: right;
margin: 0em;
text-align: left;
padding: 0em;
background-color: blue;
border-left: 1px dotted #000;
}
#footer
{
background: red;
padding: 2px;
text-align: right;
clear: both;
border-top: 1px dotted #333;
}
#content {
margin: 0em;
padding: 1em 1em 1em 1em;
text-align: justify;
}
#side {
margin: 0em;
padding: 1em 1em 1em 1em;
text-align: left;
}
#sidebox
{
margin: 0em;
padding: 0em;
border-bottom: 1px dotted #333;
}
#sideboxbottom {
margin: 0em;
padding: 0em;
}
</style>
</head>
<body>
<div id="wrap">
<div id="head">
#HEAD
</div>
<div id="main">
<div id="left">
<div id="content">
<p>t was there that I saw you
And it was there that I came
</p><p>
As evening sighs,
Rises up against the sky-line
Let me come and have my leis
</p><p>
You were fair and fey as a sun that evil day
We were bold and life was great
But as time went on
I wondered what was wrong
I wondered what became of you
</p><p>
Let me hold you in my arms dear
And let me melt in the heat of your gaze
And let the clock strike one,
Time and mind go marching on
Let our sense of selves decay
</p><p>
It was there that I saw you
In the heat of a summer's embrace
But as time went on
I wondered what went wrong</p>
</div>
</div>
<div id="right">
<div id="side">
<div id="sidebox">
...And You Will Know Us By The Trail Of Dead
</div>
<div id="sideboxbottom">
Champagne Breakfast For Everyone!
</div>
</div>
</div>
<div id="footer">
#FOOTER
</div>
</div>
</div>
</body>
</html>
Tacksam för hjälp :)