2

I want to display 3 images in a row (I do not want to use tables since is not tabular data, is just one line with three images...) I have the following HTML which works OK:

 <div> <span class="step"><img src="" alt="step one" class="image" ></span> <span class="step"><img src="" alt="step two" class="image"></span> <span class="step"><img src="" alt="step three" class="image"></span> </div>

The problem starts when I add a border to each image (I also included a bit if text to describe what each image is about). I did the following in HTML,

 <div> <span class="step">First Step <img src="" alt="step one" class="image" ></span> <span class="step">Second Step <img src="" alt="step two" class="image"></span> <span class="step">Third Step <img src="" alt="step three" class="image"></span> </div>

in CSS, 

.step{ width:200px; height:150px; border: 1px solid red; }

I was expecting to see a box with an image and a text but instead I get a bizarre box around the text only. Any ideas on how to add the border to the span element?

Improve this question

4 Answers 4

Reset to default
3

Add display: inline-block. inline elements don't have widths or heights. block elements will create line breaks. Get the compromise with inline-block. http://caniuse.com/#feat=inline-block

If you want to support IE 6 and 7, then do inline-block on a span, instead of a div.

http://jsfiddle.net/mDHn9/

Or, as GustavoCostaDeOliveira insists, use float: left.

http://jsfiddle.net/6VmBj/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

"inline elements don't have widths or heights." great reminder thanks!
inline-block is poorly supported, use "display:block;float:left;" instead it
@GustavoCostaDeOliveira They are goodly supported. I even added a caniuse. If you are talking about old IE, just use (my favorite) this code: <!--[if IE]> <p>You are using IE &lt;10. Please update to the latest version or use <a href="http://chrome.google.com">Chrome</a></p> <![endif]-->
@GustavoCostaDeOliveira But I did add.
1

Yes, the "span" are displayed inline... Change the "span" to "div" or add display:block in css rule

Improve this answer

1 Comment

If I used <div> then each image appears in each row, that is why I used <span> instead of <div>. I need the three images with a border in the same row...
0

Yes, use display: block; because span is an inline by default

.step{ display: block; width:200px; height:150px; border: 1px solid red; }
Improve this answer

3 Comments

The inline-block are not completely supported.. Use "block" instead it
If I add "display: block;" then the images appear one in each row. I need the three images in the same row...
@M.Froese Then use the non-well (as Gustavo.... says) supported inline-blockor do float:left;
0

try to add to the css

float: left;

.step{ width:200px; height:150px; border: 1px solid red; float: left; }

http://jsfiddle.net/NYwVd/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.