Om man har ett block, vi kallar detta block parent. I detta blocket vill man ha två vertikala kolumner. Man har två stycken block i blocket, två children alltså. Man float-ar child 1 left och child 2 blocket.
Då kommer parent-blocket att minska sin höjd till 1 px eller liknande, då det inte innehåller något som inte är floatat.
I detta block har du lagt en background-image repeat-y som då funkar som faux columns... Att parent-blocket då minskar höjden gör ju att det inte funkar så bra med faux columns.
Hur ska man göra? Ska man sätta en statisk höjd på parent? Då blir det ju problem när man ska öka innehållet i child 2 blocket (mitt stora textblock här). En min-height kommer inte funka, då parent inte anpassar sig efter höjden.
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html {
background:black top left url(images/layout/bg1.jpg) fixed repeat-x;
}
html, body {
margin: 0; padding: 0;
height: 100%;
}
body {
background-repeat:repeat-y;
background-position: 50%;
background-image:url(images/layout/bgBody.gif);
}
#temp
{
height:1500px;
width: 800px;
margin: 0 auto;
background-color:transparent;
}
.grey {color:#444; margin: 0;}
</style>
</head>
<body>
<div id="temp"><p class="grey">Hello</p></div>
</body>
</html>
Body taggen blir inte 100% som html taggen blir, utan den blir bara så hög som viewporten är. Hur löser man det?
Andra frågan är hur man löser problemet med att man vill ha en wrapper som går ner hela vägen till slutet av innehållet utan faux columns och utan javascript. Varför? Jo för att man vill att boxar som kommer under wrappern ska flyta rätt (dvs. flyta under!).
