PDA

View Full Version : wrapper doesn't stretch with content


svensegers99
12-08-2009, 01:22 PM
hey,

I'm looking for the solution for days now but still can't find it.My wrapper just doesn't want to stretch down with the content :s.
I just can't figure out why.

This is the link to the site:

http://svensegers88.uuuq.com

I made the BG colour of the wrapper pink and as you see the colour just stops randomly in the middle.

my css code:

html, body {
height: 100%; /* héél belangrijk */
}

#wrapper {
background-color: #F0F;
width: 930px;
position: relative;
margin-right: auto;
margin-left: auto;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */
}
#wrapper #header {
height: 150px;
width: 930px;
float: left;
}
#wrapper #inlog {
height: 45px;
width: 930px;
float: left;
}
#wrapper #menu {
height: 345px;
width: 140px;
float: left;
}

#wrapper #reclame {
float: right;
height: 575px;
width: 140px;
}
#wrapper #nieuws {
height: 230px;
width: 140px;
}

#wrapper #content #commentaar {
height: 45px;
width: 650px;
}
#wrapper #content #userinfo {
width: 650px;
}
#wrapper #content #vorigecomments {
width: 650px;
}
#wrapper #content {
width: 650px;
height: 100%;
background-color: #03C;
float: right;
}

#wrapper #reclame {
height: 575px;
width: 140px;
background-color: #0CC;
}

my html code:

<!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=utf-8" />
<title>mijn project: sven segers</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">

<div id="header">
</div>
<div id="inlog">
<label>Login:
<input name="login" type="text" id="login" size="20" maxlength="20" />
</label>

<label>Paswoord:
<input name="paswoord" type="text" id="paswoord" size="15" maxlength="10" />
</label>
<label> Onthoud mij?
<input type="checkbox" name="remember" id="remember" />
</label>
<label> Onthoud paswoord?
<input type="checkbox" name="rempasswrd" id="rempasswrd" />
</label>
<label>
<input type="submit" name="inloggen" id="inloggen" value="Log mij in" />
</label>
<label>
<input type="submit" name="reset" id="reset" value="Alles wissen" />
</label>
</div>
<div id="menu">
<ul>
<li><a href="file:///F|/Webproductie2/Sven Project!!!/index.html">Home</a></li>
<li><a href="#">Taxonomie</a></li>
<li><a href="#">Hybrides/morphs</a></li>
<li><a href="#">Anatomie</a></li>
<li><a href="#">Gedrag</a></li>
<li><a href="#">Voortplanting</a></li>
<li><a href="#">Aandoeningen</a></li>
<li><a href="#">Terrarium</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="nieuws">
</div>
</div>

<div id="reclame">
</div>

<div id="content">
<div id="contenttop">
</div>
<h1>De magische pagina der slangen</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae egestas tortor. Maecenas malesuada consequat sollicitudin.</p>

<div id="contentbottom">

</div>

<div id="commentaar">
<h1>Antwoorden</h1>
</div>
<div id="userinfo">
<p>hier komt userinfo: naam en datum van post</p>
</div>
<div id="vorigecomments">
<p>hier komt de zever die de vorige user heeft gepost.moet meerekken naar gelang de lengte van de geposte content!</p>
</div>
<div id="commentbox">
<textarea cols="70" rows="6">typ hier uw antwoord...</textarea>
</div>
<div id="replyknoppen">
<label>
<input type="submit" name="verzenden" id="verzenden" value="Posten" />
</label>
<label>
<input type="submit" name="wissen" id="wissen" value="Wissen" />
</label>
</div>
</div>
</div>
</body>
</html>

gentleone
12-08-2009, 01:43 PM
Did you try it with no height and min-height properties in #wrapper? If you set no height to a div then the length of the content itself will stretch the height.

Corrosive
12-08-2009, 02:09 PM
Have you tried adding overflow: hidden; to your wrapper CSS?

Read this...

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

svensegers99
12-08-2009, 02:22 PM
when I use "overflow: hidden:" the wrapper stretches out until just below the contact link.The wrapper just stops there and cuts of all the rest underneath it.When I don't use overflow: hidden it goes as far down as with overflow: hidden only then the rest of content is still visuale (without the wrapper BG colour then).When I firebug it,and hover over the wrapper,you can see the wrapper actually stopping underneath the link "contact" :s.

svensegers99
12-08-2009, 02:30 PM
ow and I just noticed that the background doesn't stretch down to the bottom either :s

edit: content BG is fine as long as I don't give the wrapper a height

svensegers99
12-09-2009, 10:53 AM
after checking the css I found out that the problem is the "float: right" in my # wrapper # content.When I take that part away,the wrapper works perfect (for now) but it looks promising.

svensegers99
12-09-2009, 04:19 PM
apparently my wrapper/container stretches out as far as the first floating object goes.That is the div in the top left corner of the screen.If I say it has to be 1000px in height,the wrapper will stretch out a 1000px.Sow thats the problem.Does anyone know how to solve this?The div of the menu should stretch out eqaully with the whole content div.I've tried stuff like height:100% or auto but that doesn't work.

edbr
12-10-2009, 12:35 AM
faux image or in other words an image that repeats behingd the menu to make tit appear that the menu 'stretches'