Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    161
    Thanks
    71
    Thanked 1 Time in 1 Post

    Floating text in table cell

    Hi. I have the following
    Code:
    <tr>
         <td>business class flights to <strong>Abu Dhabi</strong> from <strong>£1185</strong></td>
         <td>business class flights to <strong>Miami</strong><span>from <strong>£1365</strong></span></td>
    </tr>
    At the moment, all the text starts from the left. The reason I have "from £1365" in a span because I wanted this part of the text to float on the right hand side of the table cell. Span doesnt seem to do the trick, so I was wondering what other options were available.

    Cheers

    Nick

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    ou can't float inline content as it has to stay inline with the surrounding content.

    The simplest solution would be to make it a separate column.

    Most of that text should be outside the table anyway - the first column should contain the destination and the second column should be the amount. These headings should be displayed in the <thead> of the table in <th> tags. That way your table will be defined correctly and displaying proper tabular data.

    The "Business Classs flights to:" part should go in the <caption>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    161
    Thanks
    71
    Thanked 1 Time in 1 Post
    I actually got it working, but I dont know if its good. What I ended up doing is applying a class to the span tags, and for the css for that class, I used float:right. Seems to do the trick.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by nick2price View Post
    I actually got it working, but I dont know if its good. What I ended up doing is applying a class to the span tags, and for the css for that class, I used float:right. Seems to do the trick.
    Possibly in some browsers.

    Adding more bad code to the bad code you already have isn't going to work in all browsers.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    161
    Thanks
    71
    Thanked 1 Time in 1 Post
    Well if there is a better way then I would like to try and do it. Problem is I dont really know the way you suggest. Do you know of any examples of this type of thing?

    Nick

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    I'd start with the following and then adjust the appearance using CSS.

    Code:
    <table>
    <caption>Business Class flights to:</caption>
    <col id="dest">
    <col id="cost">
    <thead>
    <tr><th>Destination</th><th>Cost from:</th></tr>
    </thead>
    <tbody>
    <tr>
         <td>Abu Dhabi</td><td>£1185</td>
         <td>Miami</td><td>£1365</td>
    </tr>
    </tbody>
    </table>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    nick2price (06-20-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •