inline-block not working as expected

Question

I want to create a page with a load of fixed width/height divs that wrap (left to right) when they get to the edge of the page.

Firstly, the smaller div width/height is being ignored and as a result they are overlapping.

Secondly, the divs are going down the page and not across.

http://jsfiddle.net/beakie/3S465/

Example

Can anyone please advise why (and what I would need to do to fix this issue)?

Thanks

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Store Name</title>

        <style>
            .item-container {
                width: 1200px;
                height: 1200px;
                background-color: blue;
            }

            .item {
                display: inline-block;
                width: 200px;
                height: 200px;
                background-color: red;
                border: 1px solid black;
            }

            .image {
                width: 100px;
                height: 100px;
                background-color: green;
            }

            .name {
                background-color: purple;
            }

            .quantity {
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div>
            Store Name
        </div>
        <div class="item-container">
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
            <div class="item">
                <div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />
                <div class="name">Widget</div>
                <div class="quantity">12</div>
            </div>
        </div>
    </body>
</html>

possible duplicate of [Are self-closing tags valid in HTML5?](http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5) — Huangism, Aug 06 '14 at 13:24
Self-closing tags are not valid in HTML5. That is what the above question discusses. — TylerH, Aug 06 '14 at 13:31
@Beakie Yes you would of if you look closely. Anyway, the duplicate marking is more for the site than your question — Huangism, Aug 06 '14 at 13:32

score 5 · Accepted Answer · answered Aug 06 '14 at 13:21

The issue is the following:

<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/" />

Self closing divs don't exist! This should be written as:

<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>

P.S: I'd show an updated fiddle, but the site seems to be broken right now.

score 1 · Answer 2 · answered Aug 06 '14 at 13:23

1

you can try below code:

<div class="image" style=""></div>

and

<img src="" />

Because div is not self close tag.

answered Aug 06 '14 at 13:23

Pradeep Pansari

1,287
6
10

inline-block not working as expected

2 Answers2