Problem with Float Right CSS causing drop to next line

Discussion in 'HTML' started by news.frontiernet.net, Apr 16, 2004.

  1. 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?
     
    news.frontiernet.net, Apr 16, 2004
    #1
    1. Advertising

  2. news.frontiernet.net wrote:
    > 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 }.

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
     
    Barry Pearson, Apr 17, 2004
    #2
    1. Advertising

  3. "Barry Pearson" <> wrote in message
    news:_Z5gc.18112$4N3.9465@newsfe1-win...
    > news.frontiernet.net wrote:
    > > 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.
    >

    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!

    > --
    > Barry Pearson
    > http://www.Barry.Pearson.name/photography/
    > http://www.BirdsAndAnimals.info/
    > http://www.ChildSupportAnalysis.co.uk/
    >
    >
     
    news.frontiernet.net, Apr 18, 2004
    #3
  4. news.frontiernet.net wrote:
    > "Barry Pearson" <> wrote in message
    > news:_Z5gc.18112$4N3.9465@newsfe1-win...

    [snip]
    >> 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!


    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;
    }

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
     
    Barry Pearson, Apr 18, 2004
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bd
    Replies:
    0
    Views:
    635
  2. OAM
    Replies:
    1
    Views:
    498
    Breklin
    Oct 24, 2006
  3. Deniz Bahar
    Replies:
    2
    Views:
    481
    Andrey Tarasevich
    Mar 9, 2005
  4. Carsten Fuchs
    Replies:
    45
    Views:
    1,561
    James Kanze
    Oct 8, 2009
  5. Peng Yu
    Replies:
    6
    Views:
    108
    C.DeRykus
    Jun 14, 2010
Loading...

Share This Page