PDA

View Full Version : unwanted space in layout


flawlesstwins
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">
<head>
<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;
}
</style>
</head>

<body>
<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>
</div>
</body>
</html>

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







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

gentleone
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 :)

Rob_Che
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.