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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do i use css to arrange text side by side without wrapping under each other

    Hi all,

    I am trying to solve the problem shown in the graphic. When the text wraps, it wraps beneath the number as depicted. But I do not wish this. I wish the text to wrap like in a bullet type way whereby the beginning of each line is on the same y-axis.

    The html to produce the following is:

    Code:
    .sstories {
    background:url("../images/vote_count.png") no-repeat 0 0;
    padding-top:3px;
    padding-right:13px;
    float:left;
    }
    
    .count_total {
    margin-left:8px;
    color:#774525;
    font-weight:700;
    font-size:110%;
    }
    
    a.switchurl {
    border-bottom:1px solid #eadfb4;
    display:block;
    margin-right:8px;
    padding:0 0 4px 5px;
    }
    
    <div class="sstories">
    	<span class="count_total"><a href="{$story_url}">{$link_shakebox_votes}</a></span>
    </div>
    	
    <a href="{$story_url}" class="switchurl">{$title_short}</a>
    Attached Thumbnails Attached Thumbnails How do i use css to arrange text side by side without wrapping under each other-css-question.jpg  

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    I would give the count div a specified width, text-align right, and then give the switchurl class a left margin equal to the width of the sstories div.
    Last edited by vtjustinb; 09-26-2007 at 06:02 PM. Reason: used your class names for clarity

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes this seems to have worked, but i did not under stand the text-aling right bit.

    Quote Originally Posted by vtjustinb View Post
    I would give the count div a specified width, text-align right, and then give the switchurl class a left margin equal to the width of the sstories div.

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by sefs View Post
    Yes this seems to have worked, but i did not under stand the text-aling right bit.
    Well, if you add a set width to the number class, you have to make it big enough to handle large numbers (like say 3 digits), but left-aligned numbers with only one digit will probably have too much space between it and the content:

    Code:
    1            Content Content Content Content
    So by instead putting text-align right, the padding between the number and the content will always be consistent, and the number can grow without enacting a large gap between it and the content:

    Code:
             1   Content Content Content Content
         1   2   Content Content Content Content
     3   2   4   Content Content Content Content
    That's totally a presentational issue and it's up to you whether or not you think that'd be something to consider--it's just probably how I'd do it.

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes that sounds nice. I tried it, but the text-align: right; command seems to have no effect...its still stuck to the left as you depicted it.


  •  

    Posting Permissions

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