0

i've got 4 spans in a row.

<div id=container>
     <span id="1">blue</span>
     <span id="2">red</span>
     <span id="center">all colors</span>
     <span id="3">grey</span>
</div>

i want to have the 'all colors' in the center of the webbrowser and the blue and red to the left of it, and the grey to the right.

how could i do this?

ajsie
  • 77,632
  • 106
  • 276
  • 381
  • Without using absolute positioning, I assume? – Pekka Jan 30 '10 at 17:29
  • exactly=) its ajax embeded spans...so the nr of spans changes...but i want the id=center always to be in the center. – ajsie Jan 30 '10 at 17:35
  • Ids cannot start with numbers. http://stackoverflow.com/questions/70579/what-is-a-valid-value-for-id-attributes-in-html – James Jan 30 '10 at 17:57
  • Similar to: http://stackoverflow.com/questions/1992342/centering-a-specific-element-inside-a-div-using-css – Joel Jan 30 '10 at 18:09

2 Answers2

2
<div id="container">
<span class="float_l blue">blue</span>
<span class="float_l red">red</span>
<span>all colors</span>
<span class="float_r gray">grey</span> 
</div>

#container {text-align:center;overflow:hidden;}
#container span {display:block;width:auto;height:20px;line-height:20px;padding:0 10px;}
.float_l {float:left;}
.float_r {float:right;}
.blue {background:blue;}
.red {background:red;}
.gray {background:#ccc;}

If you want to have the right floated element in the same line as others you will have to put it before left floated elements.

easwee
  • 15,757
  • 24
  • 60
  • 83
  • very close but not exactly what i wanted. the left and right elements are on the edge of the webbrowser but i want them to be close to the center element. so it looks like one continous row. – ajsie Jan 31 '10 at 05:30
  • if the "all colors" span has to be fixed in the centre all of the time, you will need some javascript to offset the left and right elements once they are added in. Unfortunately it can't be done with css only without adding additional markup to html. – easwee Jan 31 '10 at 19:44
0

Can you pad out each side with empty spans so #center is always middle by count?

If so, you can set each span to display: table-cell (and possibly the parent to table or table-row, don't know if that'd be required to get them to fill the width) with the same width, or at least all but #center with the same width.

Edit: Well, I've been playing with it in Firefox, and it doesn't at all do what I expected, so the only solution I can think of is scripted placement.

Edit: Actually, it kinda works with the div set with display: table and width. *shrug*

Anonymous
  • 49,213
  • 1
  • 25
  • 19