How to Make Multiple Spans Equal Width Within a Div

How can I make multiple spans equal width within a div

I have to strongly disagree with the other answers, suggesting inline-block and float:left as these solutions will give you a floating layout. This may be fine most of the time, I have seen cases where 33.33% + 33.33% + 33.33% > 100%, usually on Android devices. This pushes the last cell onto the next line.

Since you are trying to create a tabular appearance, I would recommend using tabular display styles:

<style>
    #myTable {
        display: table;
        border: 1px solid black;
        width: 300px;
    }

    #myTable > * {
        display: table-cell;
        width: 33.33%;
    }
</style>
<div id="myTable">
    <span style="background: red">one</span>
    <span style="background: yellow">two</span>
    <span style="background: red">three</span>
</div>

CSS only - same width for multiple span elements, based on the largest

Easiest solution, that will work with the HTML structure you have - format the whole thing as a table.

.container {
  display: table;
}

.container .variant {
  display: table-row;
}

.container .variant span {
  display: table-cell;
 }

<div class="container">

  <div class="variant">
    <span class="variant-name">Size:</span>
    <span>28</span>
  </div>
  
  <div class="variant">
    <span class="variant-name">Waterproof:</span>
    <span>Yes</span>
  </div>
  
  <div class="variant">
    <span class="variant-name">Color:</span>
    <span>Azure</span>
  </div>
  
</div>

Two same span elements but have different width

Thanks for the HTML.
Consider this: the font-size you have set for those spans is quite big, and when the window is not wide enough the text inside the spans starts to wrap.
Spans have display:inline; by default and when wrapped the two text will appear as one BUT with different wrapping, because the second continues immediately after the first and its text is most probably broken on a different place.
If you set display:block; for those spans there should be no difference.

HTML/CSS - Limiting span lengths and lining up multiple spans

Try using flex

.spanContainer {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

Fluid width with equally spaced DIVs

See: http://jsfiddle.net/thirtydot/EDp8R/

• This works in IE6+ and all modern browsers!
• I've halved your requested dimensions just to make it easier to work with.
• text-align: justify combined with .stretch is what's handling the positioning.
• display:inline-block; *display:inline; zoom:1 fixes inline-block for IE6/7, see here.
• font-size: 0; line-height: 0 fixes a minor issue in IE6.

#container {  border: 2px dashed #444;  height: 125px;  text-align: justify;  -ms-text-justify: distribute-all-lines;  text-justify: distribute-all-lines;  /* just for demo */  min-width: 612px;}
.box1,.box2,.box3,.box4 {  width: 150px;  height: 125px;  vertical-align: top;  display: inline-block;  *display: inline;  zoom: 1}
.stretch {  width: 100%;  display: inline-block;  font-size: 0;  line-height: 0}
.box1,.box3 {  background: #ccc}
.box2,.box4 {  background: #0ff}

<div id="container">  <div class="box1"></div>  <div class="box2"></div>  <div class="box3"></div>  <div class="box4"></div>  <span class="stretch"></span></div>

---

Related Topics