Floating SPANS within DIV

  • Resolved fool4Christ

    (@fool4christ)


    16 years, 8 months ago

    I’m working on the next version of my theme NeoBox, and I’ve run into a bit of a styling problem. Here’s what I’m trying to do.

    I have a section of the theme that looks something like this (highly simplified):

    <div><span class="1">One</span> <span class="2">Two</span> <span class="3">Three</span></div>

    As it is, the result looks good — each SPAN is separated by some whitespace and usually a CSS background image. However, I want to improve the layout with a little bit of float magic. However, I have no idea how to do it!

    div span { display: block; } div span.2 { float: right; }

    That gets me partially there, with the second SPAN floated to the right; unfortunately, it appears on the same line as the third SPAN when I would prefer it to appear on the same line as the first. The second span may have a lot of content requiring line breaks, and its length should not affect SPANs 1 & 3 on the left.

    Any ideas?

    (I realize I could put SPAN 2 before SPAN 1 and then float it, but that wouldn’t make any semantic sense.)

Viewing 3 replies - 1 through 3 (of 3 total)

  • Can you float both span 1 and 2 left? And if you’re using display:block on span 1, you could even specify a width.

    If you have a link to share, it would help. ??

    Thread Starter fool4Christ

    (@fool4christ)

    Just came back to mark this as fixed. I solved it by giving in & using container DIVs — one for the left-floated items, another for right-floated.

    It’s working great, despite being a bit too much code than I’d like.

    I did experiment with floating both spans left, specifying widths, max-widths, and a number of other things, but the only thing that worked flawlessly was adding additional DIVs within the main DIV mentioned in my opening post.

    Glad to hear it’s solved. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Floating SPANS within DIV’ is closed to new replies.