1. Home
  2. Forums Index
  3. Browser Side / CSS 3:14 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Extra empty space after <div> that cannot be removed

         

jj2ii3344

8:12 pm on Jun 19, 2011 (gmt 0)

10+ Year Member



Hi all, I am relatively new to CSS and came across a problem where there are some empty spaces after a div block that cannot be removed. A section of the code is embedded below. Also some note:

- There is a background image that is used on the entire page
- banner.png is a 1024 by 164 image
- When the below code is used. The following is rendered:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<center>
<table border="10" width="1024" height="100" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/banner.png" style="z-index:1; position:relative; top:40px; left:0px;"></img>
<div style="position:relative; top:-15px; left:0px; background-color:#ffffff; height: 80px;"></div>
<div style="z-index:2; position:relative; top:-115px; left:0px; height: 10px; text-align:center;"><a href="">SHOP LASHES</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
<a href="">TIPS & TECHNIQUES</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">ABOUT ENVY
ME</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
<a href="">CONTACT US</a></div>
</td>
</tr>
</table>
</center>

Many thanks!

[edited by: alt131 at 1:59 am (utc) on Jun 20, 2011]
[edit reason] Side Scroll and 404 [/edit]

jj2ii3344

8:13 pm on Jun 19, 2011 (gmt 0)

10+ Year Member



Sorry, link to screen capture is at:
[appwalk.com...]

lucy24

8:56 pm on Jun 19, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Help! Nearest passing moderator! My window is not 4000px wide :(

You can eliminate a lot of potential problems by first making sure the document validates. In your case you've got three languages mixed together: XHTML forms such as <link ... />, Transitional tags such as <center> ... and a DTD that says HTML Strict. On top of that, you've got the undefined attribute "height", and no charset declaration.

And, on the CSS side: you've got a stylesheet. Use it. There are times when inline styles are necessary, but it's a last resort.

Now, that plea for moderatorial help was triggered by something that has no place in the html. Sure, you can sometimes deal with simple problems by shoving in a non-breaking space. For example, a single &nbsp; takes up fewer bytes and is faster than {white-space: nowrap} if you only need one of them to lock a whole table column into place. But when you've got mile-long strings of them, they're doing a job that should be done by something else. Here it appears to be horizontal spacing. What happens if the user doesn't have the identical font you do? Same name doesn't always mean identical to the last pixel.

Now, is the "extra space" that you're asking about the white space between the text (which, incidentally, is much too pale for most readers' comfort) and the bottom "copyright" bar? Your html snippet cuts out before we get to this point.

jj2ii3344

9:09 pm on Jun 19, 2011 (gmt 0)

10+ Year Member



Thank you very much for the detailed response Lucy! I am definitely going to re-read your response and re-work the document.

As for the extra space, I am referring to the bit between the header and the beginning of the main section where the white space is broken up by the background.

Here is the complete html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<center>
<table border="0" width="1024" height="100" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/banner.png" style="z-index:1; position:relative; top:40px; left:0px;"></img>
<div style="position:relative; top:-15px; left:0px; background-color:#ffffff; height: 80px;"></div><div style="z-index:2; position:relative; top:-115px; left:0px; height: 10px; text-align:center;">
<a href="">SHOP LASHES</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="">TIPS & TECHNIQUES</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="">ABOUT ENVY ME</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
<a href="">CONTACT US</a></div>
</td>
</tr>
</table>
</center><center>
<table border="0" width="1024" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td valign="top" style="border-right: 1px solid #b3b3b3; padding-left: 25px; padding-right: 25px;"><img src="images/aboutenvyme.jpg" align="left">
</td>
<td width="100%" valign="top"><div class="text" style="padding-left: 65px; padding-right: 65px; padding-top: 65px; padding-bottom: 65px;">Brand description brand description brand description brand description brand
descriptionbrand description brand description brand description brand description
brand description brand description brand description brand description
brand description brand description brand description brand description brand
description brand description brand description brand description brand description
brand description brand description brand description</div></td>
</tr>
<tr><td><div style="height: 50px;">&nbsp;</div></td></tr>
</table>
</center>
<center>
<table border="0" width="1024" height="28" cellpadding="0" cellspacing="0" background="images/bannerlower.png">
<tr>
<td width="50%" align="left" valign="middle" style="padding-left: 25px;"><font class="footer">&copy; <i>2011 ME COSMETICS. ALL RIGHTS RESERVED.</i></font></td>
<td width="50%" align="right" valign="middle" style="padding-right: 25px;"><font class="footer">PRIVACY POLICY</font></td>
</tr>
</table>
</center>
</body>
</html>

[edited by: alt131 at 1:58 am (utc) on Jun 20, 2011]
[edit reason] Side Scroll [/edit]

penders

11:03 pm on Jun 19, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



As lucy24 says you need to validate the HTML (eg. "</img>" !) and use your stylesheet.

Avoid "spacers", use CSS instead...
<div style="position:relative; top:-15px; left:0px; background-color:#ffffff; height: 80px;"></div>


You seem to be relying on position:relative quite a bit, which I would have thought is complicating your markup and is probably the underlying cause of the "empty space" you are seeing. Relatively positioned elements don't 'free' the space they would otherwise occupy.

Your banner.png should be a background-image of one of your containers, you can then easily place text on top of it. Ideally, only images that you would call 'content' should be part of the page content ie. in an IMG tag.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:14 pm May 1, 2026