Display: block showing all my <span>s inline

Question

I am just learning CSS so this is probably something super basic that I am just messing up. I have a page with 2 header divs one main content div and a footer div. I just have an image and a couple of lines of text in the main content div and I want them to display vertically. I have the text broken up like I want with spans and have display:block in the CSS for the div. I thought this would display everything vertically but it is still displaying all in one line.

I appreciate any help you can provide.

 #a { border: 2px solid #000000; float: left; margin: 10px 0px; width: 30%; } #b { border: 2px solid #000000; float: right; margin: 10px 0px; width: 60%; } #c { border: 2px solid #000000; margin: 10px 0; padding: 50px; display: block; text-align: center; } #d { border: 2px solid #000000; margin: 10px 0; padding: 50px; } #e { border:2px solid #000000; margin: 10px 0; width: 100%; overflow: hidden; } img { width: 150px; height: 150px } 

Relating to this HTML

 <div id="c"> <span><img src="../blog/assets/profile1.png" alt="Picture of Sid Watal"/></span> <span>There and Back</span> <span>My journey</span> </div> 

The image and following spans are all being displayed inline. There is currently no content in the other divs.

Thank you for your help.

Answer 1

<span> 's by default are inline.

You should be using divs if you want blocks. But if you want to force the span's in your html to be blocks (you shouldn't - you should change them to divs), just do this:

#c span { display: block; }

Answer 2

The easiest way to do this is remove the <span> tags, replacing them with <div> The span tag is becoming redundant, I never use it any more as a DIV behave much better in all situations. Span doesn't like to be stylised.

Keep your CSS the same. Your new HTML:

 <div id="c"> <div><img src="../blog/assets/profile1.png" alt="Picture of Sid Watal"/></div> <div>There and Back</div> <div>My journey</div> </div>