[Solved] Why is css margin-bottom not effecting the rest of the boxes?

by


First, let’s separate your CSS from your HTML in my own example:

#wrap {
    width: 440px;
    margin: 0 auto;
}
.image {
    float: left;
    margin: 10px;
    position: relative;
}
.image h1 {
    position: absolute;
    top: 0;
    text-align: center;
    width: 200px;
}
.image h2 {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 200px;
}

Now, let’s write some HTML:

<div class="image">
    <img src="http://www.placehold.it/200" />
     <h1>Title</h1>
     <h2>Price</h2>
</div>

We’ll make four boxes and wrap them all together:

<div id="wrap">
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>    
         <h2>Price</h2>    
    </div>
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>    
         <h2>Price</h2>    
    </div>
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>    
         <h2>Price</h2>    
    </div>
    <div class="image">
        <img src="http://www.placehold.it/200" />
         <h1>Title</h1>    
         <h2>Price</h2>    
    </div>
</div>

Here is a fiddle of this example!

solved Why is css margin-bottom not effecting the rest of the boxes?