View Full Version : Need help removing big gap

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"

<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;


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

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.