CODEWITHSUNDEEP
htmlcss
Christopher B
Christopher B

Reputation: 53

CSS Inline-block unable to create desired effect

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>

Upvotes: 1

Views: 51

Answers (2)

Little Santi
Little Santi

Reputation: 8823

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).

Upvotes: 0

martin
martin

Reputation: 96979

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

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

Upvotes: 5

Related Questions