How can I make a border wrap around a group of pictures?


Tags: html,css,image,border

Problem :

I'm trying to figure out how to make a border fit exactly around a group of images. As you can see in this Jsfiddle I posted, the border fits around the top and left corner, but it doesn't fit exactly around the bottom and right corners. Here is my html:

<!DOCTYPE html>
    <html>
        <head>
            <title>Gallery Test</title>
            <link type="text/css" rel="stylesheet" href="CSS.css"/>
        </head>
        <div class="album">
                <span><img class="img1" id="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-                                      fox_679_600x450.jpg">
                </span>
                <span><img class="img2" id="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-                                      fox_679_600x450.jpg">
                </span>
                <span><img class="img3" id="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-                                      fox_679_600x450.jpg">
                </span>              
        </div>


</html>

And Here is my CSS:

.img1{
    border-width:4px;
    border-style:solid;
}
.img2 {
    position:relative;
    right: 90px;
    top:5px;
    z-index:-1;

    border-width:4px;
    border-style:solid;
}
.img3{
    position:relative;
    right:180px;
    top:10px;
    z-index:-2;

    border-width:4px;
    border-style:solid;
}
.album {
    border-width:2px;
    border-style:solid;
    border-color:#78c9a9;
    display:inline-block;
}

#imgAlbum {
    height:150px;
    width:100px;
}
p {
    color:red;
}

Thanks in advance!



Solution :

There are some errors in your CSS/HTML. I corrected them and floated the images so that the border raps them exactly. I also removed the <span> tag which was not used.

DEMO

HTML :

    <div id="album">
        <img id="img1" class="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-                                       fox_679_600x450.jpg" />
        <img id="img2" class="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-                                      fox_679_600x450.jpg" />
        <img id="img3" class="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-                                      fox_679_600x450.jpg" />                   
    </div>

CSS :

#img2 {
    z-index:-1;
    margin: 5px 0 0 -90px;
}
#img3{
    z-index:-2;
    margin: 10px 0 0 -80px;

}
#album {
    border-width:2px;
    border-style:solid;
    border-color:#78c9a9;
    display:inline-block;
}

.imgAlbum {
    position:relative;
    height:150px;
    width:100px;
    border:4px solid #000;
    display:block;
    float:left;
}
p {
    color:red;
}

    CSS Howto..

    How to activate jQuery function with img instead of button?

    Fonts wont change and id height wont show

    How to change text color for all links in Materialize CSS navbar?

    How to make a descriptions list inline?

    How to apply customized css to SSRS report

    How to prioritize a CSS class?

    How to invert the pentagon created using CSS?

    Mobile-Friendly CSS - How to hide a sidebar? [closed]

    How can I make it so the first element in a DIV has a different CSS to others?

    How can I achieve this layout using CSS only?

    How to use a custom toggle switch in jquery mobile

    web app CSS navbar retina icons - How can I fit a 60x60 icon into a 30x30 background-image on IE7+8?

    How to use css property under a class only

    make the div (in css) to grow bottom-up? how?

    How do I vertically center an image whose size can change in a div?

    How to use custom CSS with my Sharepoint WebPart?

    How can I reduce the amount of vertical space between lines of text using CSS?

    How to make div css background hover

    How to get a JavaFX XYchart to work with user defined CSS?

    How to add CSS class to CQ dialog box

    How can I create a color with values for green, blue, orange, and gold only?

    How to load self hosted font files if the GoogleFont service is unavailable?

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    navbar is split into multiple div classes - how to stick them all to the top on scroll? (javescript)

    How can you hide the title tag using CSS?

    How to fit in an image inside span tag when onclick?

    How can I achieve float left at bottom and float right at top with css flexbox?

    How to reveal part of blurred image where mouse is hovered?

    How do you ad stylesheets to JSDOM

    How to apply css transform on iOS without using -webkit-transform?