...

View Full Version : Need help removing big gap



brettj
10-29-2006, 02:48 AM
In the example code below, there is a large gap at the bottom of the page. I'm speaking of the white space between the blue box and the end of the page. I understand why it's there, but I need a way to get rid of it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>
<style type="text/css">

#wrap {
width: 760px;
margin: auto;
}

#box1 {
background: #000;
width: 100%;
height: 400px;
}

#box2 {
background: #0000ff;
width: 100%;
height: 200px;
}

#box3 {
background: #ff0000;
width: 300px;
height: 300px;
position: relative;
top: -200px;
left: -50px;
float: left;
}

</style>
</head>

<body>
<div id="wrap">
<div id="box1"></div>
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>

_Aerospace_Eng_
10-29-2006, 03:12 AM
This is normal. Relatively positioned elements occupy the space they were originally in. Why are you using relative positioning in the first place? Just use margins. Don't abuse positioning. Its exactly what you are doing.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum