Det står lite om dilemmat här:
http://www.webforum.nu/showthread.php?t=162076
Men som jag fattar av tråden, så funkar ingen av lösningarna i IE i alla fall.
Jag har själv använt ett javascript från projectseven.com flera ggr. Funkar galant och är väldigt enkelt att lägga in:
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Om man nu inte vill använda sig av tabeller, alltså....
Frågan#1
Okej,
jag trodde det skulle bli enkelt att bygga två simpla kolumner som är 100% höga. Men nej då :e
Som det är nu så huggs den ena kolumnen av när man scrollar, om den andra är högre. :(
Kolla här: http://shadeevents.se/kolumner.html
(Testar just nu bara för Firefox och IE7, tar resten sen :P )
Hjälp vore tacksamt! :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Delia - Vi serverar den godaste maten</title>
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
div#col1 {
width:200px;
min-height:100%;
float:left;
background-color:red;
}
div#col2 {
width:200px;
min-height:100%;
background-color:green;
float:left;
}
</style>
</head>
<body>
<div id="col1">
<p>
Ut at odio. Proin a mauris. Duis vel turpis. Suspendisse potenti.
Morbi eros ligula, vulputate eget, consequat quis, sodales vitae,
risus. Aenean massa. Quisque ut magna a nisl vehicula mattis.
Duis ante. Vivamus purus odio, ornare eu, mattis et, mattis lobortis,
massa. Vivamus ac massa sit amet ante eleifend dictum. Duis scelerisque
ipsum eu mi. Suspendisse consectetuer nibh venenatis urna. Nullam
viverra vestibulum lectus.
</p>
<p>
Ut at odio. Proin a mauris. Duis vel turpis. Suspendisse potenti.
Morbi eros ligula, vulputate eget, consequat quis, sodales vitae,
risus. Aenean massa. Quisque ut magna a nisl vehicula mattis.
Duis ante. Vivamus purus odio, ornare eu, mattis et, mattis lobortis,
massa. Vivamus ac massa sit amet ante eleifend dictum. Duis scelerisque
ipsum eu mi. Suspendisse consectetuer nibh venenatis urna. Nullam
viverra vestibulum lectus.
</p>
<p>
Ut at odio. Proin a mauris. Duis vel turpis. Suspendisse potenti.
Morbi eros ligula, vulputate eget, consequat quis, sodales vitae,
risus. Aenean massa. Quisque ut magna a nisl vehicula mattis.
Duis ante. Vivamus purus odio, ornare eu, mattis et, mattis lobortis,
massa. Vivamus ac massa sit amet ante eleifend dictum. Duis scelerisque
ipsum eu mi. Suspendisse consectetuer nibh venenatis urna. Nullam
viverra vestibulum lectus.
</p>
</div>
<div id="col2">
<p>
Ut at odio. Proin a mauris. Duis vel turpis. Suspendisse potenti.
Morbi eros ligula, vulputate eget, consequat quis, sodales vitae,
risus. Aenean massa. Quisque ut magna a nisl vehicula mattis.
Duis ante. Vivamus purus odio, ornare eu, mattis et, mattis lobortis,
massa. Vivamus ac massa sit amet ante eleifend dictum. Duis scelerisque
ipsum eu mi. Suspendisse consectetuer nibh venenatis urna. Nullam
viverra vestibulum lectus.
</p>
</div>
</body>
</html>