Problem with Float Right CSS causing drop to next line

  • Thread starter news.frontiernet.net
  • Start date
N

news.frontiernet.net

I am trying to right adjust the last section of information on a line using
<span class="category-link"> and CSS float:right;.

The problem I am having is that, in addition to the firght adjust, this
causes the material in the <span> to drop to this next line and overlap what
is there. An undesireable visual effect..

Here is the code I am using;
<style type="text/css">
#firmheader {border: 1px solid black; background-color: lightgreen;
font-family:Arial; font-size:12; text-align: right; width: 100%;}
..firmheader_text{float: left;}
#firmbox { line-height:90%; padding-top: 2px; padding-bottom: 1px;
border-bottom: 1px solid silver;}
..firstline {position:relative; text-align: right; margin-bottom: 1px;}
..firm {float: left; font-family: arial; font-size: 12pt; font-weight:
bold; margin-left: 5px;}
..secondline {padding-bottom: 2px; margin-left: 15px;}
..contact {color: red; font-family: arial; font-size: 10pt;}
..street {margin-left: 0; color: dimgray; font-size: 10pt;
font-family: Arial, Helvetica;}
..suite {color: dimgray; font-size: 10pt; font-family: Arial, Helvetica;}
..city {color:dimgray;}
..phone {color: red; font:11pt Comic Sans MS; padding-left:10;
padding-right: 10px;}
..chamber {margin-left:3px;}
..category_link {float: right;}
table {border: 2px solid red; margin: 3px}
td {border: 1px dotted purple; padding: 2px;}
</style>

Here is the HTML coding for a typical entry

<div ID="firmheader">
<span class="firmheader_text" >Firm Name</span>
<span class="firmheader_category">Phone Number</span>
</div>

<div ID="firmbox">
<div class="firstline">
<span class="firm">A & B Business Equipment</span>
<span class="phone">507/836-6667</Span>
</div>
<div class="secondline">
<span class="street">914 Fourth Ave</span>
<span class="city">Windom</span>
<span class="chamber"><A HREF="/Business/chamlist.htm">
<img src="images/chamber.jpg" border=0 width="46" height="12"
alt="Click to see a list of ALL Chamber members"></A></span>
<span class="category_link"><a href="wcompute.htm">Computer Sales /
Service</a></span>
</div>
</div>
<div ID="firmheader">
<span class="firmheader_text" >Firm Name</span>
<span class="firmheader_category">Phone Number</span>
</div>

<div ID="firmbox">
<div class="firstline">
<span class="firm">A & B Business Equipment</span>
<span class="phone">507/836-6667</Span>
</div>
<div class="secondline">
<span class="street">914 Fourth Ave</span>
<span class="city">Windom</span>
<span class="chamber"><A HREF="/Business/chamlist.htm">
<img src="images/chamber.jpg" border=0 width="46" height="12"
alt="Click to see a list of ALL Chamber members"></A></span>
<span class="category_link"><a href="wcompute.htm">Computer Sales /
Service</a></span>
</div>
</div>

The resulting example can ve viwed here:
http://www.wgtn.net/Business/wgtnwha_relay_2.htm

Is there a way to use float:right; to achieve right-adjust in a situation
like this? Or must I go to a design that uses fixed boundaries like we used
to have imposed upon us by tables to get control of horizontal and vertical
positioning on screen?
 
B

Barry Pearson

news.frontiernet.net said:
I am trying to right adjust the last section of information on a line
using <span class="category-link"> and CSS float:right;.

The problem I am having is that, in addition to the firght adjust,
this causes the material in the <span> to drop to this next line and
overlap what is there. An undesireable visual effect..

In general, wherever I see lots of rows, each of which has floats in it, I
would expect to see plenty of { clear: right } or { clear: both } (or
whatever) properties. Floats often drop through the bottom of their
containers. I haven't studied your case to see if that is your specific
problem, but at least you need to eliminate it as a potential problem.

Read:
http://www.complexspiral.com/publications/containing-floats/

[snip]
The resulting example can ve viwed here:
http://www.wgtn.net/Business/wgtnwha_relay_2.htm

Trying looking at that with a much larger text size, and in some browsers (eg.
Firefox) the left & right text starts to overlap.

Note also that this is faulty HTML. You use the same ID many times (firmbox).
I'm not sure what trouble that is giving you, but you need to turn it into a
class.
Is there a way to use float:right; to achieve right-adjust in a
situation like this? Or must I go to a design that uses fixed
boundaries like we used to have imposed upon us by tables to get
control of horizontal and vertical positioning on screen?

You have the sort of data which works well with a table! In effect, what you
are attempting to do, by wrapping each row in firmbox, is trying to achieve
table-rows, the hard way.

You *are* attempting to use fixed boundaries, of a sort. You want row
boundaries, and the left & right boundaries of the overall column are fixed.
If you used a table, you could still right-align the stuff in the right hand
column. Using a table may make the effect look cleaner.

But if you *really* don't want a table, I think it may be better to wrap each
row differently. Instead of firstline, secondline, etc, perhaps leftstuff and
rightstuff would be better. Then float the rightstuff right, and and let the
leftstuff flow into place naturally. (Or vice versa). And I suspect you don't
need to use { position: relative }.
 
N

news.frontiernet.net

Barry Pearson said:
In general, wherever I see lots of rows, each of which has floats in it, I
would expect to see plenty of { clear: right } or { clear: both } (or
whatever) properties. Floats often drop through the bottom of their
containers. I haven't studied your case to see if that is your specific
problem, but at least you need to eliminate it as a potential problem.
All that clear:both does when applied to the firstline is to create a new
blank line between firms that displays the misplaced category that has the
misbehaving float.
Read:
http://www.complexspiral.com/publications/containing-floats/

[snip]
The resulting example can ve viwed here:
http://www.wgtn.net/Business/wgtnwha_relay_2.htm

Trying looking at that with a much larger text size, and in some browsers (eg.
Firefox) the left & right text starts to overlap.

Note also that this is faulty HTML. You use the same ID many times (firmbox).
I'm not sure what trouble that is giving you, but you need to turn it into a
class.

Is there a way to use float:right; to achieve right-adjust in a
situation like this? Or must I go to a design that uses fixed
boundaries like we used to have imposed upon us by tables to get
control of horizontal and vertical positioning on screen?

You have the sort of data which works well with a table! In effect, what you
are attempting to do, by wrapping each row in firmbox, is trying to achieve
table-rows, the hard way.

You *are* attempting to use fixed boundaries, of a sort. You want row
boundaries, and the left & right boundaries of the overall column are fixed.
If you used a table, you could still right-align the stuff in the right hand
column. Using a table may make the effect look cleaner.
One of the objectives was to get rid of tables and use just CSS. Supossedly
CSS renders faster and takes less load time.
But if you *really* don't want a table, I think it may be better to wrap each
row differently. Instead of firstline, secondline, etc, perhaps leftstuff and
rightstuff would be better. Then float the rightstuff right, and and let the
leftstuff flow into place naturally. (Or vice versa). And I suspect you don't
need to use { position: relative }.
The times I have tried this approach there has been difficulty getting the
lines to corelate horizontally. So, I thought this approach would not face
that issue and since it seems so simple in a wordprocessor, I thought with
CSS it would be simple too. Ha!
 
B

Barry Pearson

news.frontiernet.net said:
The times I have tried this approach there has been difficulty
getting the lines to corelate horizontally. So, I thought this
approach would not face that issue and since it seems so simple in a
wordprocessor, I thought with CSS it would be simple too. Ha!

Try this to get the lines to correlate. Or use <p> for all the text within
each box, and <br> between the lines. And CSS can be quite tricky when you try
to do things that are better done with a table!

HTML:

<div class="firm">
<div class="leftstuff">
<div>Left first line</div>
<div>Left second line</div>
<div>Left third line</div>
</div>
<div class="rightstuff">
<div>Right first line</div>
<div>Right second line</div>
<div>Right third line</div>
</div>
</div>

CSS:
div.firm {
clear: both;
}
div.leftstuff {
float:left;
}
div.rightstuff {
float: right;
text-align: right;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,834
Latest member
BuyCannaLabsCBD

Latest Threads

Top