Forum Moderators: not2easy
<html>
<head>
<title>Float issue</title>
<style type="text/css">
#breadcrumbs {
font: 8pt/8pt normal verdana, arial, sans-serif;
padding: 3px;
margin: 0 10px 10px;
border: 1px solid #a9a9a9;
background: #dcdde9;
}
#sitemap {
float: right;
font-size: 7pt;
}
</style>
</head>
<body>
<div id="breadcrumbs">
<strong>You Are Here:</strong> Path > To > Current > Page
<a id="sitemap" href="sitemap.html">Site Map</a>
</div>
</body>
</html>
If you try the code, you'll see that the "Site Map" link is not being enclosed in the #breadcrumbs div. In Firefox, it's kind of half-in and half-out. In IE, it's all the way outside the border below the div.
I wanted it to be enclosed in the div, just like the rest of the text, but at the right-hand edge of it. This should be simple, and I should at least be able to figure out what's actually going on...maybe I'm just out of practice.
Thanks in advance,
Matthew
Also, I know there are some who believe that a size won't matter, however, I always put a size on my containers that float.
<div id="breadcrumbs">
<a id="sitemap" href="sitemap.html">Site Map</a>
<strong>You Are Here:</strong> Path > To > Current > Page
</div>
Shouldn't the link be before the other text so it will float to the right of it?
