1

I am using this CSS Code with media queries:

.clearfloat {
    clear: both;
    font-size: 1px;
    height: 0;
    line-height: 0;
}
.box-container {
    width:100%;
    text-align:center;
}
.icon-box {
    width:32%;
    max-width:500px;
    display:inline-block;
    border:1px solid #CCC;
    margin-top:10px;
    margin-bottom:10px;
}

@media screen and (max-width: 990px) {
    .icon-box {
        width:290px;
    }
}
@media screen and (max-width: 960px) {
    .icon-box {
        width:270px;
    }
}

@media screen and (max-width: 880px) {
    .clearfloat {
        display:none;
    }
    .icon-box {
        width:80%;
        margin:0 auto 0 auto;
        margin-top:10px;
        margin-bottom:10px;
    }
}

i want to have a min-height for each box but when i add it, the boxes don't display inline

here is a Fiddle with the full CSS and HTML Code: http://jsfiddle.net/aAtk5/1/

1
  • What is the min-height you are talking about?
    – Agat
    Nov 4, 2013 at 11:58

1 Answer 1

0

Setting min-height to .icon-box seems to work fine. http://jsfiddle.net/aAtk5/5/

.icon-box {
    min-height:50px;
    ...
    ...
}
10
  • see here: jsfiddle.net/aAtk5/4 - i have added just a height rather than min-height and the text is not displaying inside the div
    – charlie
    Nov 4, 2013 at 13:13
  • because the text overflows, in windows chrome, the revision 4, changing height (which is fixed), for min-height (which isn't) looks good to me
    – aaronps
    Nov 4, 2013 at 13:17
  • @charlie See updated answer, I mean the fiddle link. Nov 4, 2013 at 13:18
  • what happened to the divs displaying inline?
    – charlie
    Nov 4, 2013 at 13:24
  • @charlie isn't this the required O/P, are we missing anything. Nov 4, 2013 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.