Space between two <div> tags

HTML & CSS
1

Hello Friends,

I have a huge problem I can not solve. I have always a space between two div tags. I just cannot find the bug :frowning:

View the html/css here
or here the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   
   <html>
   
   	<head>
   		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
   		<title>Welcome</title>
   		<style type="text/css" media="screen"><!--
   a:link {
   	color: #00888f;
   	text-decoration: underline }
   a:visited {
   	color: #00888f;
   	text-decoration: underline }
   a:active {
   	color: black;
   	text-decoration: none }
   a:hover {
   	color: #2eb6bd;
   	text-decoration: none }
   body {
   	color: #333;
   	font-size: 0.7em;
   	font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
   	line-height: 1.2em;
   	text-align: center;
   	margin: 0 }
   #logo {
   	background-image: url("images/index_01.gif");
   	margin: 0;
   	padding: 0;
   	width: 225px;
   	height: 68px;
   	float: left }
   #centercontent {
   	text-align: left;
   	margin: 0 auto;
   	padding: 0;
   	width: 753px }
   #headermenu {
   	color: #00888f;
   	background-image: url("images/index_02.gif");
   	text-align: center;
   	width: 525px;
   	height: 68px;
   	float: right }
   --></style>
   	</head>
   
   	<body>
   		<!-- Page Center-->
   		<div id="centercontent">
   		
   			<!-- Logo Line-->
   			<div id="logo"></div>
   			<div id="headermenu">
 		 	<a href="#">&uuml;ber uns</a> | <a href="#">Aktuelles</a> | <a href="#">Newsletter</a> | <a href="#">Produkte</a> | <a href="#">Referenzen</a> | <a href="#">Online Shop</a> | <a href="#">Stellenangebote</a> | <a href="#">Kontakt</a></div>
   			<!-- Ende Logo Line-->
   			
 		</div>			
   		<!-- Ende Page Center-->
   	</body>
   
   </html>
2

Youā€™ve got a gap because 525 + 225 does not equal 753! :rolleyes:

Either reduce the width of the centercontent div, float the headermenu div left instead of right, or move the end of the menu graphic out of the logo image.

3

oh man, thank you a lot! :agree:

4

Just a guess (Iā€™m no CSS guru), but have you tried putting

   	margin: 0;
   	padding: 0;

in your #headermenu definition?

5

Beat me to itā€¦and got it right. :slight_smile:

6

thank you, everything works now :slight_smile:

Just one thing: does firefox has a bug while using padding for a div tag? It moves also div tags below the one I am using padding in.

7

If you are using padding on a div which you have also specified the width of, e.g.

#mydiv {
width: 500px;
padding: 10px;
}

you should understand how the CSS box model works. In the example above, the overall total width of the div will be 520px; 500px is the inner width of the div, plus 10px on each edge means that the space it actually takes up is 520px wide.

8

ok, I understand. So is there a way to put text 10px away from the border other than making inside the div tag an other one? But Internet Explorer still uses 500px, right?

9

If you have a DIV with some text inside (contained in P tags, natch), you have two choices:

a) Apply 10px padding to the DIV
b) Apply 10px margin to the P

If you choose option B, you have no problem. However, if you choose A, then you need to understand the box model, and more specifically how certain browsers implement it incorrectly.

According to the [correct implementation of the] CSS box model, the total width of an element is:

WIDTH + PADDING + BORDERS

So if you have a div defined thusly:

#mydiv {
width: 250px;
padding: 50px;
border: 2px solid #f00;
}

The total width it takes up on the page will be:

250 + (50 * 2) + (2 * 2) = 354px

EXCEPT in browsers that bork the box model like IE5.x, where the overall width will be whatever you set the CSS width property to be: 250px in our example. This has the effect of making your content (i.e. the bit inside the borders and padding) be smaller than you intended - in this case:

250 - (50 * 2) - (2 * 2) = 146px

Best practice is therefore to avoid using padding to space out your elements and try to use margins instead.

HTH.

10

a great explenation buddy bradley! Thank you.

margins + borders = same implementation in all browsers? (mozilla/firefox, IE, opera)?

11

Margins are the same in all browsers; but as I explained above, IE5.x will include border widths (as well as padding) when it calculates the dimensions of an element. :slight_smile:

12

I do not like IE :wink:

thank you very much!

13

How do you display a div with borders exactly the same in IE and Firefox? Or is it impossible to make divs, letā€™s say a width and height 250px with border=1, the same size in IE and Firefox?

14

Ignoring the obvious fact that pixel-perfect identical pages in different browsers is not the be-all and end-all of web design, there are a few ways to ā€˜hackā€™ certain browsers to do the same thing.

First off, you need to specify which version of IE youā€™re talking about - itā€™s only the version 5 browsers that get the box model wrong, IE6 is fine (except when itā€™s running in quirks mode, which emulates the v5 rendering engine). Google ā€œIE6 quirks modeā€ for more information.

If you want IE5.x to display a div exactly the same as Firefox, the most common method (although I donā€™t know why, as itā€™s also the most difficult to remember!) is Tantek Celikā€™s original Box Model Hack. Iā€™m not going to bother typing out a full explanation - go read Tantekā€™s. :slight_smile: