CODEWITHSUNDEEP
htmlcss
Zack Macomber
Zack Macomber

Reputation: 6905

Extra line is displaying after longest line

I have the following output in a webpage (the black highlighted areas contain sensitive data):

Provider Screenshot

Each of the lines display correctly except for that the longest line always has another blank line after it.

Here's the code that represents a line:

<div style="clear:both; white-space:nowrap;">
    <span style="float:left; margin-right:5px">
    <a class="provider" href="javascript:void(0)" 
        onkeypress="showProviderInfo(this, 'claim2')"
            onclick="showProviderInfo(this, 'claim2')">[+]</a>
    THE ENTRY WITH THE LONGEST NAME CAUSES AN EXTRA LINE TO DISPLAY BELOW IT...
    </span>
    <span style="float:right">
        <a href="javascript:void(0)"
        onkeypress="openAddWindowForMedicalProvider('12345678')"
        onclick="openAddWindowForMedicalProvider('12345678')">
    Create as Medical Provider
    </a>
    &nbsp;
    <a href="javascript:void(0)"
        onkeypress="openAddWindowForServiceProvider('12345678')"
        onclick="openAddWindowForServiceProvider('12345678')">
    Create as Service Provider
    </a>
    </span>
</div>
<br />

How can I style this such that the extra line doesn't show up after the longest one?

Upvotes: 0

Views: 80

Answers (1)

evan
evan

Reputation: 12535

This seems to work fine for me using jsfiddle.net

However, you both have </ div> and <br />. A div automatically gets a new line so the br is redundant and may be causing your issues.

Also, <span style="float:left; margin-right:5px"> may be causing issues. Floats and margins don't always do what you expect. Maybe change it to padding-right or seeing what happens if you remove the spacing entirely and just put in a couple &nbsp; to see if that works.

You shouldn't need to float that span left anyway.

It may also be helpful to test this in multiple browsers. It may be a browser thing. IE is probably going to mess stuff up that works correctly in Firefox or Chrome.

Upvotes: 1

Related Questions