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 serve css files in djangos's flatpages?

    how to make those two divs in one line

    How to add Button over image using CSS?

    how to check what css code is invalid using browser plugins [closed]

    How do you position divs on a line with space in the middle, without fixing the width of the container?

    How can I fix Buttongroup Dropdowntoggle-Buttons in Bootstrap?

    JavaScript -Change CSS color for 5 seconds - How to add easing effect?

    how to remove css property using javascript?

    How do I apply an outline to a custom styled HTML selection element's expansion clickable element only?

    how to center perfectly image and text inline in the center of page

    How to achieve this bevel button in CSS?

    How to use CSS to make an input fields behaves like a button click?

    How to show a notification bar on Top after n seconds with transition from top to down?

    How to align text in CSS

    How to make equal space between boxes in one row via CSS

    How to make a site have a built in user-friendly editor?

    How to keep div visible when hovering another div

    How to make div background color transparent in CSS

    Positioning in CSS : How to make an absolute-positioned content display outside of its relative-positioned parent?

    PHP / CSS How to work with themes for my site? [closed]

    How to change Bootstrap-select's placeholder color

    How to remove the gap between each list-item in an unordered list?

    How to change this FontAwesome to image in Css?

    how is at the rate import filename.css in style tag different from link tag to relate to css file

    How do I center two divs within a larger div?

    How to conditionally load CSS and extend it using SASS/SCSS

    How to make images stay on one long line?

    how to change “product details” text to my own text in Virtuemart?

    How can I style the current (today's date) in bold font?

    My div box isn't showing up, what am I doing wrong? [closed]