How can I make this bit of HTML centered between two floats?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Samishii23
    New Member
    • Sep 2009
    • 246

    How can I make this bit of HTML centered between two floats?

    I have the following basic setup:
    Code:
    <div>
     <span style="float:left;">
      <span>Items</span>
      <span>Items</span>
      <span>Items</span>
     </span>
    
     <span style="float:right;">
      <span>Items</span>
      <span>Items</span>
     </span>
    </div>
    I wanna put some HTML between the two span elements that will be in the center of both of them. But I've tried both div and span, align:center;, and I'm not sure how to do this short of using display:table; and re-organizing the my current setup.

    Anyone have any ideas?
  • Rabbit
    Recognized Expert MVP
    • Jan 2007
    • 12517

    #2
    If by center you mean in between the two spans, you can just have 3 elements floated left and they will stack up right next to each other.

    Comment

    • Samishii23
      New Member
      • Sep 2009
      • 246

      #3
      You mean have another span float in there to create white space?
      I was just hoping to have
      Code:
      +-----------------------------------------+
      | SPAN             SPAN               SPAN|
      +-----------------------------------------+
      Without using a 'hack' of sorts. For example wishing there was something similar to a float: center; sort of idea I guess.
      Is there something Im missing? Or is it really only "Hack"able to get this effect without using display:table;??

      Comment

      • Rabbit
        Recognized Expert MVP
        • Jan 2007
        • 12517

        #4
        I mean this
        Code:
        <style>
           div {
              float: left;
           }
        </style>
        
        <div>column 1</div>
        <div>column 2</div>
        <div>column 3</div>
        If you want them to be equally spaced, you can give the divs a width of 33%.

        Comment

        Working...