CSS Inline-block unable to create desired effect

Question

I am trying to create a grid of boxes that fills the browser width and wraps nicely using the display: inline-block pair/value. I'm a newbie, but in any case I am not getting the desired effect. Below is my code, please help:

.ifieds{
    display: inline-block;
    width: 660px;
}

.classbox1{
    width:361px;
    height:282px;
    border-radius: 5px;
    background-image: url(https://optometryadmissions.files.wordpress.com/2013/10/istock_000019402859xsmall.jpg);
    background-color:#CEB5A1;
    margin-bottom: 15px;
}

.classbox1 > p{
    margin: auto;
}

.classbox2{
    width:660px;
    height:283px;
    border-radius: 5px;
    background-image: url();
    background-color:#CEB5A1;
    margin-bottom: 15px;
}

.classbox3{
    width:359px;
    height:279px;
    border-radius: 5px;
    background-image: url();
    background-color:#CEB5A1;
    margin-bottom: 15px;
}

.classbox4{
    width:459px;
    height:282px;
    border-radius: 5px;
    background-image: url();
    background-color:#CEB5A1;
    margin-bottom: 15px;
}

.classbox5{
    width:361px;
    height:282px;
    border-radius: 5px;
    background-image: url();
    background-color:#CEB5A1;
    margin-bottom: 15px;
}

<!--html codes-->
<div class="ifieds">
    <div class="classbox1">Jobs</div>
    <div class="classbox2">Cars and Vehicle</div>
    <div class="classbox3">Apartment Rental</div>
    <div class="classbox4">Houses for Sale</div>
    <div class="classbox5">Pro Services</div>
</div>

martin · Accepted Answer · 2016-09-03 15:27:05Z

5

You need to set display: inline-block; on each .classboxX element, not their parent div:

.ifieds > div {
    display: inline-block;
}

answered Sep 3, 2016 at 15:27

martin

97.4k26 gold badges205 silver badges237 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Little Santi · Accepted Answer · 2016-09-03 16:04:03Z

Appart than the display, you'll have to adjust the width values.

First of all, I suggest you put all the common attributes together in the same descriptor:

.ifieds div {
    height: 282px;
    border-radius: 5px;
    background-color: #CEB5A1;
    margin-bottom: 15px;
    margin-left: 5px;
}

If you want the grid to spread along all the browser's width:

.ifieds {
    width: 100%;
}

And if you want the blocks to be adjacent one to another:

.ifieds div {
    ...
    display: inline-block;
}

Then, distribute all the available width between the cells, so that they sum 100%:

.classbox1{
    background-image: url(https://optometryadmissions.files.wordpress.com/2013/10/istock_000019402859xsmall.jpg);
    width:16%;
}

.classbox2{
    width: 25%;
}

.classbox3{
    width: 15%;
}

...

If you use always percentage sizes (which is a good practice in web design), even if the browser is resized, the relative widths will remain the same (with some exterme limits: if the browser is shrinked too much, the inner texts won't fit, and the blocks will spread to several lines. Make a complete set of tests).

Collectives™ on Stack Overflow

CSS Inline-block unable to create desired effect

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related