Spaces between divs

programming web dev
1

Hey guys,

Just playing around with DIVs at the moment. I realised when i place 3 divs in a row, and lets just say i want the 3rd div to auto adjust with the amount of content, i get a space between the first and the 3rd div. I have no idea why. But If I add padding of 1 pixel, then you will see the middle div adjusting all the way to the top div and the last div leaving no spaces.

So besides adding the 1px of padding, is there another way around it? I must be doing something wrong?

I’ve added a comment on the css, if you activate what I commented out, you will see what I mean.

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#top {
	background-color: #0066CC;
}
#middle {
	background-color: #00CC99;
	<!-- padding:1px; -->
}
#bottom {
	background-color: #009966;

}
-->
</style>
</head>

<body>
<div id="top">Content for  id "top" Goes Here</div>
<div id="middle">
  <p>Content for id "top" Goes Here</p>
  <p>Content for id "top" Goes Here</p>
  <p>Content for id "top" Goes Here</p>
</div>
<div id="bottom">Content for  id "top" Goes Here</div>
</body>
</html>