Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS float and wrapped text

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #194538
    jpersons
    Participant

    Hi,

    Via the HTML quoted below, the resulting page looks like this:

        1. This is a line of text that at width 400px becomes 
           a block that's three lines high provided there are 
        enough words to make it do that 
    

    I’d prefer it looked like this (all lines of text equidistant
    from the 40px padding on the left)

         1. This is a line of text that at width 400px becomes 
            a block that's three lines high provided there are 
            enough words to make it do that 
    
    --------------------
    <!DOCTYPE html> <html lang="en">
      <style type="text/css">
      .idChars { float:left; width:1em; padding-right:0.8em; padding-bottom:4px; }
      .txtLN   { padding-left:40px; padding-bottom:4px; font-family:Georgia,serif; font-size:llpt; }
      </style>
      </head>
    <body style="width:400px;font-family:Georgia,serif; font-size:11pt;">
    <div class="txtLN"><span class="idChars">1.</span> This is a line of text that at width 400px becomes a block that's three lines high provided there are enough words to make it do that
    </div>
    </body></html>
    --------------------
    

    This is new territory for me( obviously), I played with height for the floated
    value, but could find nothing that paid attention to the number for wrapped rows
    in the txtLN.

    Fiddled with “display:inline-block” but hand no luck with that. Played some with
    ul / li / etc.
    but ran into the same problem when “text” wrapped on multiple
    lines.

    Advice most welcome!

    #194544
    Paulie_D
    Moderator

    Could you demo the issue in Codepen, it’s much easier for us than a codedump.

    #194549
    bikejunkie
    Participant

    I don’t know much about css yet. But it seems that a numbered list with a padding tag or

    &lt;blockquote&gt; in the html?

    #194552
    jpersons
    Participant

    Sure, here’s the URL

    http://codepen.io/anon/pen/YPxQYX

    #194554
    Paulie_D
    Moderator

    You haven’t wrapped the ‘main’ text in any sort of text tag..which is just poor practice in my opinion.

    If you don’t you can’t select it other than by selecting the parent.

    If you do, you can give that element the required margin instead of padding on the parent.

    http://codepen.io/Paulie-D/pen/RNZgJR

    Also, numbered ‘items’ like this are really the province of lists…any reason for not using one?

    #194555
    jpersons
    Participant

    Vagaries in the data preclude using numbered list — the “ids” for separate entries can be numbers, letters, alpha-num all with/without punctuation.

    The padding is there cuz many (what I’ll call) records in the data have hierarchical relationships to preceding & following records.

    I’m working to take some really messy data and give it a tiny touch of order so others can wade through it more efficiently … never dull ;-)

    Thanks for the thoughts

    #194556
    jpersons
    Participant

    Looks like that will work … thanks (this site is a huge help for newbies like me) !!

    #194559
    Paulie_D
    Moderator

    Vagaries in the data preclude using numbered list — the “ids” for separate entries can be numbers, letters, alpha-num all with/without punctuation.

    I said lists but the don’t necessarily have to be numbered lists…and we now have other techniques for adding pretty much any text as an identifier/item identifier…pseudo elements for one.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.