How can I make multiple spans equal width within a div

Question

Say I have the following:

<div style="border: 1px solid black; width:300px;">
<span style="background: red; width:100px;">one</span>
<span style="background: yellow; width:100px;">two</span>
<span style="background: red; width:100px;">three</span>
</div>

What CSS can I apply to make the spans equally spaced within the div?

Is your intent for the outer container to be fixed to 300px or for the inner spans to just be evenly width'd? — Jeremy Smith, Oct 14 '11 at 11:30

score 7 · Accepted Answer · edited Jun 09 '23 at 17:03

7

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:

        #myTable {
            display: table;
            border: 1px solid black;
            width: 300px;
        }
        
        #myTable > * {
            display: table-cell;
            width: 33.33%;
        }

<div id="myTable">
  <span style="background: red">one</span>
  <span style="background: yellow">two</span>
  <span style="background: red">three</span>
</div>

edited Jun 09 '23 at 17:03

mplungjan

169,008
28
173
236

answered Oct 14 '11 at 23:11

Brian Nickel

26,890
5
80
110

Hi Brian, funnily enough - in the end I encountered the same issue you mention here. I also ended up using a table to solve it. Pity though cos I really wanted to not use a table. – Steve Walsh Oct 17 '11 at 16:03
You're not using a table, you're just telling the browser to display the spans as they would display a table. The key difference being that the html isn't actually a table, so screen-readers and web crawlers and other "blind" visitors don't assume it's tabular data. The other benefit, as will all css, is that if you decide to display it some other way, you change the css, not the html. But I do agree it's a pity you can't just say "width: 1/3". – Anthony Mar 06 '12 at 07:10

Dennis Traub · Answer 2 · 2011-10-14T11:30:07.190

Spans are inline elements and have the width of their respective contents. If you want to set a specific width, use block elements like div or p and arrange them horizontally with float:left;

<div style="border: 1px solid black; width:300px;">
   <div style="float:left; background: red; width:100px;">one</div>
   <div style="float:left; background: yellow; width:100px;">two</div>
   <div style="float:left; background: red; width:100px;">three</div>
</div>

Generally speaking, span is used for formatting purposes, like setting font style, etc. Block elements like div can be used for layout and positioning.

You can tweak spans to do the same, but it's not recommended. Divs are there for this exact purpose.

alternatively I think you can add the style `display:inline-block` to the `` however I'm sure this is frowned upon and also probably not cross-browser safe :0 — El Ronnoco, Oct 14 '11 at 11:26

score 0 · Answer 3 · answered Oct 14 '11 at 11:24

0

Try adding 'float:left;' style to your span.

answered Oct 14 '11 at 11:24

skipi

112
6

score 0 · Answer 4 · edited Oct 14 '11 at 18:57

   span {
     display: inline-block;
     width: 33.33%;
     text-align: center;
   }

This should work, removing each 100px width you have in your spans. Spans are by default inline elements, so applying a width property directly to them has no effect. First you have to "blockalize" them. If you have some problem with some browser with the display: inline-block;, you can use float: left; instead.

score 0 · Answer 5 · answered Oct 14 '11 at 13:11

In addition to the previous answers, I would strongly advice against using styling inline with your HTML. You should try to keep things separated, and styling belongs in your CSS file/files.

Also, try looking into a grid system, that makes this kind of formatting much easier and maintainable. Good examples are:

http://960.gs/

http://cssgrid.net/

or

http://twitter.github.com/bootstrap/ (a full CSS framework that adds some extra features)

There are several others, just posting these as examples.

How can I make multiple spans equal width within a div

5 Answers5

Linked