View Full Version : unwanted space in layout

10-02-2011, 07:17 PM
I am getting unwanted space under my footer. (dw cs5) this is only in firefox. In google chrome I get a little unwanted space above the header to the top of browser and a lot under footer. It comes out perfect in internet explorer. I set margins to 0 for top and bottom and this has worked in the past. what did I do wrong?

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #CCC;
margin: 0px;
html, body {
padding: 0px;
text-align: center;
#wrapper {
width: 1024px;
margin-top: 0px;

margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#header {
height: 60px;
width: 1024px;
background-color: #0CDADA;
#NavBar {
height: 25px;
width: 1024px;
background-color: #A2ECF0;
#content {
height: 450px;
width: 600px;
float: left;
background-color: #FFF;
#sidebar {
height: 450px;
width: 424px;
clear: none;
float: right;
background-color: #fff;
#footer {
height: 25px;
width: 1024px;
clear: both;
background-color: #A2ECF0;

<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="NavBar">Content for id "NavBar" Goes Here</div>
<div id="content">Content for id "content" Goes Here</div>
<div id="sidebar">Content for id "sidebar" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>

10-03-2011, 07:46 AM
what did I do wrong?

Nothing as far as I can see. The code looks fine.

10-03-2011, 10:30 AM
I copied your code and tested it and it looks how it should be to me as well (on firefox, chrome, safari and opera on the mac) no gaps or anything. The huge gap that I see underneath your footer is because the total height of your website is not long enough for my screen :)

10-10-2011, 12:13 PM
Try adding:

* {
margin: 0;
padding: 0;

...to your stylesheet. This will reset all elements' margins and padding to 0. It's not the 'proper' way but it will show you if the spacing you're seeing is related to browser specific default padding/margin.