CODEWITHSUNDEEP
csshtml
mfroese
mfroese

Reputation: 309

Border around a <div> element

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?

Upvotes: 2

Views: 16935

Answers (4)

bjb568
bjb568

Reputation: 11488

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/

Upvotes: 3

Tony
Tony

Reputation: 17637

try to add to the css

float: left;

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

http://jsfiddle.net/NYwVd/

Upvotes: 0

idmean
idmean

Reputation: 14865

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

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

Upvotes: 0

Gustavo Costa De Oliveira
Gustavo Costa De Oliveira

Reputation: 7494

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

Upvotes: 1

Related Questions