Forums

lester

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Please Login Here!</title>
<link href="css/reset.css" type="text/css" rel="stylesheet" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
<div id="wrapper">
	
	<div id="loginContainer">
		Testing
	</div>
	<div id="footer">
		
	</div>
</div>
</body>
</html>

CSS

#wrapper{
width: auto;
min-width: 1024px;
height: auto;
min-height: 768px;
}

#loginContainer{
width: auto;
min-width: 1024px;
height: 425px;
border-top: 2px dashed #c2d2d7;
border-bottom: 2px dashed #c2d2d7;
margin-top: 50px;
}

Problem:

The wrapper moved down by 50px.

Paulie_D

You probably need to add 'overflow:hidden' to the wrapper css.

The problem, I believe is that the wrapper doesn't have a specified height and so the 'margin has nothing to push against except the whole 'page'...or something like that.

lester

But won't the min-height set a "fixed" height already??

lester

Btw, overflow hidden works tks!

treehouse : what would you like to learn today?

Forums

[Solved] What happen with MARGIN