float and wrapped text - CSS-Tricks

This topic is empty.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
January 28, 2015 at 12:07 pm #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!
January 28, 2015 at 1:24 pm #194544

Paulie_D
Member

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

January 28, 2015 at 2:04 pm #194549

bikejunkie
Participant

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

<blockquote> in the html?

January 28, 2015 at 2:15 pm #194552

jpersons
Participant

Sure, here’s the URL

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

January 28, 2015 at 2:23 pm #194554

Paulie_D
Member

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?

January 28, 2015 at 2:26 pm #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

January 28, 2015 at 2:30 pm #194556

jpersons
Participant

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

January 28, 2015 at 2:57 pm #194559

Paulie_D
Member

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.
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘CSS’ is closed to new topics and replies.