Klein beetje positioning hulp [Archief]

Volledige versie bekijken : Klein beetje positioning hulp

acqua

%Europe/Berlin %628 %2007, 16:05

Ik werk zelf normaal met floats en ik begrijp opzich de basics van het positioning idee in CSS. Ik krijg alleen het volgende niet werkend.

Ik heb een div#contentwrapper met daarin div#nav en #div#content. Onder deze wrapper valt een footer. #nav moet absolute gepositioneerd staan relatief aan de wrapper zelf. Dus ik heb;

div#contentwrapper { position: relative;}
div#contentwrapper div#nav { position: absolute; z-index: 2; height: 43px; width: 741px; left: 0; top: 0;}
div#contentwrapper div#content { position: relative; z-index: 1; width: 741px; left: 0; top: 43px;}

Nu valt de footer wel onder de wrapper, maar de wrapper strecht niet mee met de content die erin zit (zoals het met float bv. wel werkt). Iemand een idee hoe ik dit kan fixen? Dit moet de structuur dan worden;

------
WRAPPER
------
NAV
-----
-----
CONTENT
----
------
------
FOOTER
------

voskuh

%Europe/Berlin %647 %2007, 16:32

acqua

%Europe/Berlin %660 %2007, 16:50

Kan je niet ff linkje geven, dan kan ik er wat mee prutsen :D

Heb daar zelf nogal wat problemen mee gehad, omdat mijn footer onderaan de pagina moest blijven staan, maar wel moest meebewegen. Uiteindelijk is het me gelukt, dus misschien kan ik je dan wel helpen.

Ik heb het maar even zo gedaan;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div#contentwrapper { position: relative;}
div#contentwrapper div#nav { position: absolute; z-index: 2; height: 43px; width: 741px; left: 0; top: 0;}
div#contentwrapper div#content { position: relative; z-index: 1; width: 741px; left: 0; top: 43px;}</style>
</head>
<body>
<div id="contentwrapper">
<div id="nav">navigatie</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
</body>
</html>

voskuh

%Europe/Berlin %680 %2007, 17:19

div#contentwrapper {
float: left;
position:relative;
width: 741px;
margin: 0px 0px 0px 0px;
background:#006600;
}

div#nav {
position: relative;
height: 43px;
width: 741px;
left: 0;
top: 0;
background:#003300;
}
div#content {
position: relative;
width: 741px;
left: 0;
top: 0px;

}

div#footer {
position: relative;
clear: both;
width: 741px;
left: 0;
background:#ff0000;
}

Is dit wat je bedoelt? Excuses voor de kleuren :D