make my span not take 100% width

Question

I want to have articles next to each other, as much as the browser width allows it. Each article has a fixed width. This attempt does not work each span takes 100% width. I guess because the elements inside the spans are making the trouble, but how to fix this?

span {
  width: 200px;
}

<span>
 <h2>Article 1</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 2</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 3</h2>
 <p>Content for article 3. Bla bla bla bla bla and some more bla...</p>
</span>

Answer 1

Best thing is to wrap inline elements inside block elements

best option is to use a div element which is block which takes a full width by default once you add a width it will work perfectly

div {
  border: 1px solid red;
  /*width:200px*/
}

<div>
  <h2>Article 1</h2>
  <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</div>

by default span is a inline element you can see in the first example which doesnt take any width you will need to set it to display:inline-block

here is the default demo

span {
  border: 1px solid red;
}

<span>
 <h2>Article 1</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 2</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 3</h2>
 <p>Content for article 3. Bla bla bla bla bla and some more bla...</p>
</span>

span {
  width: 200px;
  display:inline-block;
  border:1px solid red;
}

<span>
 <h2>Article 1</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 2</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 3</h2>
 <p>Content for article 3. Bla bla bla bla bla and some more bla...</p>
</span>

If you doeswant the spacing between inline element you can use float but dont forget to clear the float

span {
  width: 200px;
  float: left;
  border: 1px solid red;
}

<span>
 <h2>Article 1</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 2</h2>
 <p>Content for article 1. Bla bla bla bla bla and some more bla...</p>
</span>
<span>
 <h2>Article 3</h2>
 <p>Content for article 3. Bla bla bla bla bla and some more bla...</p>
</span>

Answer 2

Spans are by default inline elements (and shouldn't contain block elements like h2 and p); you either need to make them block elements with

span {
  width: 200px;
  display: block; //Turn into a block element
}

or a much better option is to use a <div> instead of a span, which is already a block element by default and, more importantly, is more semantically accurate.

And here's some further reading on the difference between span and div.

Answer 3

Add display: block; to your span's class, or better use div. Also check this article on w3c schools: HTML Block and Inline Elements