1

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>
EricC
  • 5,720
  • 13
  • 52
  • 71
  • 2
    http://stackoverflow.com/questions/18492256/displaying-an-element-similar-to-p-inside-a-span – Nouphal.M Jan 06 '16 at 12:25
  • You shouldn't be placing a block element like `p` inside an inline element like a `span`. Read more: [Block vs Inline Elements](http://webdesignfromscratch.com/html-css/css-block-and-inline/) – Chuck Le Butt Jan 06 '16 at 12:31
  • `span` element cannot contain block level elements like headings, divs and paragraphs...it's invalid HTML. – Paulie_D Jan 06 '16 at 12:31

3 Answers3

3

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>
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
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.

Community
  • 1
  • 1
Henry C
  • 4,781
  • 4
  • 43
  • 83
  • 1
    Re: "which is not recommended": I agree that using a DIV would be preferable in this instance, but there's no problem changing a SPAN to a block element -- the only thing that defines a DIV as a block element is the browser's default stylesheet -- there's no technical problem with redefining things if you need to. – Chuck Le Butt Jan 06 '16 at 12:28
  • There is no technical problem, but there's very little reason to use a span as a block element, instead of a div (which is designed as block element). I mean, we could have as italics, and as bold but for obvious reasons we don't :) – Henry C Jan 06 '16 at 12:31
  • There's no reason *we can see*. There may be limitations that the OP has that we're unaware of. I agree that DIV is the most sensible option, though. It's not clear at the moment why it's "not recommended" -- really it's only because DIV is better suited, not because it will cause problems. – Chuck Le Butt Jan 06 '16 at 12:35
  • I'm having trouble imagining a scenario where you *must* use a span instead of a div, and you have control over the css – Henry C Jan 06 '16 at 12:36
  • 1
    I've been in the situation myself, so it can happen. I've made your answer clearer for the OP. – Chuck Le Butt Jan 06 '16 at 12:38
  • @HenryC, as mentioned in the question, I am actually not interested in a 3 column layout, just dynamically has as many articles next to each other as the display allows. – EricC Jan 06 '16 at 12:47
  • 1
    Ah, fair enough then - the main point still stands that you should be using a div not a span (then you can float the divs) – Henry C Jan 06 '16 at 14:35
-1

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

Роман Гуйван
  • 1,118
  • 6
  • 14
  • ok, i did my homework, will be more accurate – Роман Гуйван Jan 07 '16 at 11:00
  • 1
    W3Schools has nothing to do with W3C except its similar name, and [it isn't considered a good resource](http://www.w3fools.com/). Better ones are the actual [W3C](http://www.w3.org/) website where you can find official specifications or the [Mozilla Developer Network](https://developer.mozilla.org/). – Cedric Reichenbach Jan 07 '16 at 12:07