3 divs next to eachother but entering text moves them?

i’ve managed to get the 3 divs next to eachother but now when i enter a text the div moves up or down?
heres the code:

:
<html>
<head>
<body>
<title>ImadTest</title>
<link rel="stylesheet" type="text/css" href="stylesheetmodelready.css">
</head>
<body>
<div class="wrapper">
	<div class="header">
	header
	<a href="http://www.fussballdaten.de" target="new"><img src="bayern2.gif" border="0" title="BayernLogo"></a>
	</div>
	<div class="menu">
	menu
	<a href="http://www.fussball-web-shop.de/shop/index.php?lang=DEU&list=BAYERN-M%DCNCHEN%20FANAR" target="new">To WebShop</a>
	<br />
	<a href="http://www.fcbayern.telekom.de/de/mannschaften/profis/index.php?fcb_sid=1a702b8c99685e679715a05c4fb001ea" target="new">Team</a>
	<br />
	<a href="http://www.fcbayern.telekom.de/de/mannschaften/profis/index.php?fcb_sid=1a702b8c99685e679715a05c4fb001ea" target="new">Team</a>
	</div>
	<div class="content">
	content
	</div>
	<div class="extras">
	extras
	</div>
	<div class="footer">
	footer
	</div>
</div>
</body>
</html>
:
body {
  margin:auto;
  padding:0px;
  background-color:#1b7b7c;
}
p {
  color:#ffffff;
  font-family:verdana, arial; 
  font-size:12px;
  line-height:100%;
}
div.wrapper {
  background-color:#ffa;
  width:800px;
  height:100px;
  margin:auto;
}
div.header {
  background-color:#ffa;
  width:800px;
  height:100px;
}
div.menu {
  background-color:#ff5;
  margin-right:-4px;
  width:150px;
  height:300px;
  display:inline-block;
}
div.content {
  background-color:#ffd;
  margin-right:-4px;
  width:540px;
  height:300px;
  display:inline-block;
}
div.extras {
  background-color:#ff5;
  width:110px;
  height:300px;
  display:inline-block;
}
div.footer {
  background-color:#afa;
  width:800px;
  height:100px;
}
td {
  color:white;
  font-family:arial,verdana;
  font-size:12px;
}
a {
  color:white;
  text-decoration:none;
}

Thanks for the help :wink:

Try adding this to the top of your style sheet:

html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

It could just be default margins on your paragraphs.

The gaps are causes by collapsing margins where the margin on teh p element will collapse onto the parent and move the parent away from the element above (and vice versa for the bottom margin and elements at the bottom of the page).

You can stop the margin collapse if you add a 1px padding top and bottom to those containers.

The reset Ralph gave you above will set the elements on an even footing with regards to margin and padding but you will still need to set margins to space things apart where required (e.g. p{margin:0 0 1em}).