text hanging outside of the div

i have div for my header/menu. Inside the div is some text. I want to set the div to 1em height, but if the content is taller than that, I want the div to be taller than the content.

It seems ok in IE6, but when I use firefox, the text shows below the bottom of the div.

I'm a bit new to css. I used to use tables for this type of stuff, and everything would resize when I add content.

does anyone know how to make the header wrap around the entire content without anything sticking out?

thanks.


<html><head>
<style type = "text/css">
Body {
font: 1em verdana,arial,geneva,san serif;
}
.mainWrapper {
width:500px; 
margin-left:auto; 
margin-right:auto; 
padding:0px;
}
.Header{
margin-left:auto; 
margin-right:auto; 
margin-top:0px; 
margin-bottom:0px; 
padding:1px 5px 0px 2px; 
background-color:bbbbbb; 
clear:both; 
width:100%; 
height:1em;
text-align:right; 
border-style:solid; 
border-left-style:none; 
border-right-style:none; 
border-width:1px; 
border-top-color:red; 
border-bottom-color:black; 
vertical-align:top;
font-size:3em;
}
A.topMenuBlack {
font: 9px verdana,arial,geneva,san serif;
text-decoration: none; 
color: #000000;
font-weight: bold;
vertical-align:bottom;
}
</style>
</head>
<body style="text-align:center;">
<div class="mainWrapper" >
<div class="Header">
<A HREF="blah.htm" class = "topMenublack">home</a>
Ś
</div>
</div>
</body>
</html>

text hanging outside of the div

urfriend

urfriend

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week