Jump to content

span float:right causing br


klapy
 Share

Recommended Posts

Hi,I've been staring on this problem for a long time now, but I cant seem to find a solution.

[code]span.maintenancelinks {width: 7%;font-weight: normal;float: right;}div.contenthead {padding:0.1em;border-style: ridge;border-color: #CACED1;border-width: 1px;font-weight: bold;background-color: #EEFFFF;}[/code]

What I'm trying to do is place the maintenancelinks span in a contenthead div. In safari everything looks fine, but in Firefox/IE the float:right somehow causes it to drop down a few pixels.Here's a link to a page where the problem occurs!

Link to comment
Share on other sites

what croatiankid is saying is that once you float an element it becomes a block box even if it was a in your case a span which is usually an inline element try giving the span "maintenancelinks" a width larger than 7%heres a good article about floating:http://www.smashingmagazine.com/2007/05/01...ou-should-know/

Link to comment
Share on other sites

at the moment "Plaats bericht" is taking up 2 lines because the width of that span is small if you increase the width of the span that will fit on the one line and wont be busting out of its containeralso you shouldnt really float spans they are supposed to be inline elements, make it a div instead and float that then make sure to clear the float for each new section

Link to comment
Share on other sites

I floated a span in the first place because I wanted it to be an inline element, not knowing float automaticly makes it a block element...edit:It works :) I first had the span (div) after displaying the title, I tried putting it in front and now it displays correctly in all browsers!Thanks for the help everyone!

<div class="contenthead"><div class="maintenancelinks"><a href="#post">Plaats bericht</a></div><?php echo stripslashes($value['title']);?><span style="font-weight: normal"> geplaatst door: </span><?php echo stripslashes($value['name']);?></div>div.maintenancelinks {font-weight: normal;width:50%;text-align:right;float: right;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...