Question

I have a small problem.

Actually I’m trying to adapt the width of “content” to multiple div in it. In fact, I’m trying to adapt this code to several screens, I can’t specified a special width. The inline-block doesn’t work at all. I don’t know why. I would center the div content in the middle of my page and center classes in the middle of the div content. A perfect center in fact.

Have an idea?

HTML

<div id="content">
<div class="badges"></div>    
<div class="badges"></div>    
<div class="badges"></div>    
<div class="badges"></div>    
<div class="badges"></div>    
<div class="badges"></div>    
<div style="clear:both;"></div>       
</div>

CSS

#content{
    display:inline-block;
}

.badges{
    width:220px;
    height:380px;
    float:left;
    background:red;
    margin:10px;
}

Thanks,
Bastien

Answer 1

Don’t use float.

Try this:

#content {text-align: center;}
.badges {
    width: 220px;
    height: 380px;
    background: red;
    margin: 10px;
    display: inline-block;
}

That’s how inline-block should be used.

Also, correct your markup as Kai Qing says.