Forum Moderators: not2easy
Everything is fine, but when I float the span to the right, it drops out of the paragraph and skips down a line. I understood it would drop out of the paragraph, but why is it skipping down a line?
For instance when I put a black border on the paragraph, the floated span's top border is touching the bottom border of the paragraph.
The floated span has no top margin that might push it down, and the paragraph has no padding etc.
Here's a rough drawing of what I have now
¦----------------------------------------------¦
¦ text here...................................................¦
¦----------------------------------------------¦
...................................................floated span
anyone know what I could be missing?
[edited by: Mike521 at 6:59 pm (utc) on Mar. 17, 2008]
afaik you will have to define your floated span before the rest of the text, otherwise the content will be created as a block after the location where you set it. But I could be missing something.
<div style="clear: both;">
<p class="nomarg" style="border: 1px solid #000000;">asdf > asdf > asdf
<span style="background-color: #ff0000;" class="subnavHolders"><a href="#" class="subnav"><b>SPECIALS</b></a>
<a href="#" class="subnav">
<img src="images/in_subarrow.gif" width="12" height="12" alt="triangle"></a></span>
</p>
</div>
and the relevant CSS:
.nomarg { /* sometimes margins suck */
margin: 0px;
}
a.subnav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
a.subnav:link, a.subnav:visited {
color: #fff;
text-decoration: none;
}
a.subnav:hover, a.subnav:active {
text-decoration: underline;
}
a.subnav img { border: none; }
.subnavHolders {
float: right;
padding: 2px;
margin-right: 1px;
}
This MAY causing a sort of bug which is pushing your float down after the paragraph, but it's most likely that, as was mentioned, that your float just isn't in the right location in the HTML code. Try placing the span (which you could consider to make a div, since it's block) outside the P, and before it.
It appears you are making a sort of table of contents style thing?
You could use a table for that, one of the easiest methods is to use an image of dots in a central column/cell with background repeat-x on (and the other two side cells have the content on each side), but it will not shrink individual cell widths, making it so you'll need to have opposite text alignment to make it look nice.
You could also use floats, with the same problem of having to set the width of the floats (which should be the width of your largest entry in em units), and then set their background color to white (or whatever it is) so dots don't overlap the text.
I guess the one advantage to floats is that you don't NEED to specify the widths of the floats, as many browsers seem to auto-shrink them, but standards say they must have a width, as far as I know. (I think opera may (or may have at one time) default to full width instead of shrunken width?)
[edited by: Xapti at 1:46 am (utc) on Mar. 18, 2008]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
.nomarg { /* sometimes margins suck */
margin: 0px;
}
a.subnav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
text-decoration: none;
background-color:#FF0000;
padding:5px;
}
a.subnav:link, a.subnav:visited {
color: #fff;
text-decoration: none;
}
a.subnav:hover, a.subnav:active {
text-decoration: underline;
}
a.subnav img { border: none; }
.subnavHolders {
float: right;
padding: 2px;
margin-right: 1px;
}
.left {float:left;}
.right {float:right;}
</style>
</head>
<body>
<div style="clear: both; border:1px solid #000;">
<p class="left">asdf > asdf > asdf</p>
<p class="right">
<a href="#" class="subnav"><b>SPECIALS</b></a><a href="#" class="subnav"><img src="images/in_subarrow.gif" width="12" height="12" alt="triangle"></a>
</p>
<br style="clear:both; " />
</p>
</div>
</body>
</html>
