[resolved] Floating SPANS within DIV (4 posts)

  1. fool4Christ
    Posted 7 years 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.)

  2. Eric Amundson
    Volunteer Moderator
    Posted 7 years ago #

    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. :)

  3. fool4Christ
    Posted 7 years ago #

    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.

  4. Eric Amundson
    Volunteer Moderator
    Posted 7 years ago #

    Glad to hear it's solved. :)

Topic Closed

This topic has been closed to new replies.

About this Topic