CODEWITHSUNDEEP
htmlcss
Viktor Norlander
Viktor Norlander

Reputation: 57

Image properties get messed up when using a <div>?

So, I'm trying to align four images, two on top and two in the bottom. Together the four pieces form a map. To be even clearer: I sliced the picture of a map in four equal pieces, in PS, and now I want to put the pieces together in HTML code.

The code looks like this.

HTML: 

<div id="container">
<a href="topleft.html"><img src="topleft.png" height="50%"></a>
<a href=""><img src="topright.png" height="50%"></a>
<br style="clear:both"/>
<a href=""><img src="bottomleft.png" height="50%"></a>
<a href=""><img src="bottomright.png" height="50%"></a>
</div>

</body>

CSS:

img {
        display:block;
        float:left;
        padding:0px;
        margin: 0px;
        position: relative; 

    }  

#container {
    border: 10px solid black;
    height: 2000px;
    width:1500px;
    position: relative;
    margin: 20px auto;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px; 

}

When I don't have the div around my images the size (height="50%") is correct and also the way they float: left to align with each other (except for where I used the br style="clear:both"/. But when I put them in a div the my size attribute doesn't work, and there is a line break after every picture, so they get stacked on top of each other.

Upvotes: 1

Views: 627

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371093

But when I put them in a div the my size attribute doesn't work, and there is a linebreak after every picture, so they get stacked on top of eachother.

When you put the images in a div they become wrapped in a block element, which a div is by default. Block elements use all available width of their container. So the divs will stack vertically.

The HTML height attribute doesn't work as you expect because when a percentage value is used the height isn't calculated in relation to the image size.

From the height attribute definition in the spec:

Note that lengths expressed as percentages are based on the horizontal or vertical space currently available, not on the natural size of the image, object, or applet.

To achieve your layout quickly, efficiently and using a modern (CSS3) layout technique, try this:

HTML

<div id="container">
    <a href=""><img src="http://i.imgur.com/60PVLis.png" alt=""></a>
    <a href=""><img src="http://i.imgur.com/60PVLis.png" alt=""></a>
    <a href=""><img src="http://i.imgur.com/60PVLis.png" alt=""></a>
    <a href=""><img src="http://i.imgur.com/60PVLis.png" alt=""></a>
</div>

CSS

#container {
    display: flex;
    flex-wrap: wrap;
    width: 250px;
    height: 250px;
}

img { width: 125px; }

DEMO

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

Upvotes: 0

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

img {
        display:inline;
        float:left;
        padding:0px;
        margin: 0px;
        position: relative; 

    }  

#container {
    border: 10px solid black;
    height: 2000px;
    width:1500px;
    position: relative;
    margin: 20px auto;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px; 
    display:inline;
}

DEMO FIDDLE

Upvotes: 0

Rob
Rob

Reputation: 15160

Images are inline elements, just like text. Divs are block level elements that occupy the full width of the browser. You wrapped a block level element around an inline element. That is why your inlined images no longer work as you wish. Even floating won't fix the issue because the image is floated but the div occupies the full width.

One way to fix this is to set display:inline; or display:inline-block to your divs or you can float the divs.

Upvotes: 1

Related Questions