Hyperlinked Image Container Too Wide

Question

I'm trying to create a "row" of three hyperlinked boxes which include a descriptive text at the top and an image below that. However for some reason the container box that I've created left aligns my content, then extends out to be about double the width that I want.

What would be the best way to get it to wrap to just the minimum width required to contain the image and text? Additionally, what makes the container act the way it does now versus just wrapping the minimum width by default?

My code can be found below, as well as on this jsfiddle page. Please also enjoy the beautiful sample picture I found on W3Schools.com:

.smallimgbox {
  float: left;
  margin-left: auto;
  margin-right: auto;
}

.smallimgboxcontainer {
  overflow: auto;
  margin-right: auto;
  margin-left: auto;
  padding-right: auto;
  padding-left: auto;
}

.smallimgbox img {
  width: 50%;
  height: 50%;
  margin: auto;
}

user_3623608 · Answer

The problem are the following lines

width: 50%;
height: 50%;

that denote to take 50% of the parents width. Since your parent does not have a width defined it will set the width to your child's image full width (400px).

You have several options:

1) Define a width on your parent (e.g. 300px and your childs will have a width of 150% and being on side of each other).

2) Define a width on your childs (e.g. 200px width on your child's instead of 50% and your child will be on side of each other).

3) Remove the 50% width on your childs and each of your childs will be full width (which is 400px on your images).

4) This is what I think you want: Define the full width on your parent and set your childs depending on this:

.smallimgboxcontainer {
    width: 100%;
}

.smallimgbox {
    float: left;
    width: 50%;
    height: 50%;
 }

user_4064588 · Answer

If I understand your question correctly, you want a row divided into 3 boxes with the image and the text centered inside each box. With your code, at the moment, each smallimgbox defaults to the width of the contained img. Then you resize the image to 50% of its container box.

To have the row divided in 3 parts (using floats) you need to specify a width for each, this way:

.smallimgbox {
    width: 33.3%:
}

If you want the image to be 50% f the container and centered you have to set margin: 0 auto and make sure the img is displayed as a block:

.smallimgbox img {
   display: block;
   margin: 0 auto;
}

At this point you are only missing the text:

.smallimgbox {
   text-align: center;
}

I updated the jsFiddle.

Hyperlinked Image Container Too Wide

2 Answers