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 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text on left and on right?

    Hi there

    I made 2 styles:

    .obvestilovecje {
    font-weight:bold;
    display:block;
    background-color:#FFE6DD;
    padding: 2px 5px;
    BORDER: #cc3300 1px solid;
    }

    .obvestilodatum {
    font-size:9px;
    font-weight:normal;
    float:right;
    padding: 2px 5px;
    }

    And used code:

    <p class="obvestilovecje">Test message<span class="obvestilodatum">24.9.2006</span></p>

    But it seems that I can not get the second text (date) to be on the right of the box :-( It pops below the box in IE and FF (but not in Opera). I think my code is not working properly, not that IE and FF are wrong...

    What I would like is the date to be on the right of the box, not below it:

    http://www.gostilna-verban.com/obvestila.asp

    I tried everything I could imagine, but can not find a clue. Somehow this is expected, I am using 2 float and the box is 100% width so no wonder why the left text is not able to go inside...

    Any ideas and I would be thankfull.

    Yours

    Jerry

  • #2
    New Coder
    Join Date
    Jun 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In fact I did find a way. But it is not perfect. I made a box and then I put one text left and one text right:

    .napisbox{
    display:block;
    height:18px;
    background-color:#FFE6DD;
    padding: 2px 5px;
    BORDER: #cc3300 1px solid;
    }

    .napisboxlevo {
    font-weight:bold;
    float:left;
    display:inline;
    }

    .napisboxdesno {
    font-size:9px;
    font-weight:normal;
    float:right;
    text-align:right;
    }

    code:

    <div class="napisbox"><p class="napisboxlevo">Test message</p><span class="napisboxdesno">24.9.2006</span> </div>

    Problem is if I dont use height for the box it is 3 px high, if I use height 18px it is 18 pix high but if I have more than one line of text it get's ugly :-(

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Don't try to float inline elements as they are part of the surrounding block element with no independent positioning capability. To fix the original problem just change <span> to <div>
    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.


  •  

    Posting Permissions

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