Make a "Caption" with a Div Border

HTML & CSS
1

Hello all,

This is another question about the landing pages like this one.

Notice at line 53 begins a div called .captionwrap. The styles for this div are as follows (lines 192,193 - lp.css):


.captionwrap{border:2px groove #330; height:auto; padding:0 4px;}
.captionwrap img{border:none;}

This div width, however, stretches across the entire length of the page as you can see in the border… and it doesn’t cover the entire height of the image inside of the div.

Screenshot

Thanks all,

Tyler

2

Hi, etidd. If I understand the issue correctly, adding {overflow:hidden;} to .captionwrap to should do the trick.



.captionwrap {
    border: 2px groove #333300;
    height: auto;
    overflow: hidden;
    padding: 0 4px;
}
3

That’s the solution! I should go to the CSS reference to find out why.

4

It’s an issue of containing floats.