user3695688 user3695688 - 17 days ago 8
CSS Question

How can i align these div containers

I'm trying to align 4 divs currently next to each other with a 20px margin "top,bottom,left,right"

I have tried to add display:inline; to the container to display them all inline but that didn't work, I have also tried to float them left , still not workin.

Could someone explain to me how to get 4 divs to display next to each other without adding a different position to them all?

JsFiddle

HTML:

<div class="container">
<div class="img"><center><img src="http://1.bp.blogspot.com/_1eIdJ43s3yE/Sw1h8khv0FI/AAAAAAAAEic/L0FzKdsbxkU/s1600/usa-flag.jpg" alt="" width="194" height="194"/></center> </div>
<div class="title" id="title"><i>Lorem Ipsum</i></div>
<div class="text"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</i></div>
<div class="button"><a href="#">text link</a><div/>
</div>


CSS:

body {
background-color: #BDC3C7;
}
.container{
position:absolute;
background-color:#ECF0F1;
width:300px;
height:550px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.title{
height:35px;
}
#title{ color:white;
font-size:28px;
text-align:center;
background-color:navy;
background-image:url(img/strip.jpg);}

.img{ background-color:#2C3E50;
-webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px;
border-top-left-radius: 20px; border-top-right-radius: 20px;
}
.text{
font-size:18px;
margin-top:15px;
margin-left:25px;
margin-right:25px;
}
.button{
width:100%;
height:33px;
background-color:#2C3E50;
position: absolute;
bottom: 0;
font-size:25px; text-align:center;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
a { text-decoration:none }
a:link {color:#2ecc71;}
a:hover {color:#3498db;}

Answer

There are some errors in your html that are probably the source of your frustration.

The main issue with the html was that you weren't closing your .button div correctly. Another issue was that you were using the same id multiple times. That's just not valid.

Also, I removed the deprecated and otherwise unneeded code and css. Please never use <center> again, okay? Promise me. There's no place for a center tag in 2014. ;-) I replaced it with margin: 0 auto;. If you don't understand what that does you can look up how to center things in css.

I've cleaned up your fiddle here

HTML:

<div class="container">
    <div class="img"><img src="http://1.bp.blogspot.com/_1eIdJ43s3yE/Sw1h8khv0FI/AAAAAAAAEic/L0FzKdsbxkU/s1600/usa-flag.jpg" alt="" width="194" height="104"/></div>
    <div class="title"><i>Lorem Ipsum</i></div>
    <div class="text"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</i></div>
    <div class="button"><a href="#">text link</a></div>
</div>
<!-- 2 -->
<div class="container">
    <div class="img"><img src="http://1.bp.blogspot.com/_1eIdJ43s3yE/Sw1h8khv0FI/AAAAAAAAEic/L0FzKdsbxkU/s1600/usa-flag.jpg" alt="" width="194" height="104"/></div>
    <div class="title"><i>Lorem Ipsum</i></div>
    <div class="text"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</i></div>
    <div class="button"><a href="#">text link</a></div>
</div>
    <!-- 3 -->
<div class="container">
    <div class="img"><img src="http://1.bp.blogspot.com/_1eIdJ43s3yE/Sw1h8khv0FI/AAAAAAAAEic/L0FzKdsbxkU/s1600/usa-flag.jpg" alt="" width="194" height="104"/></div>
    <div class="title"><i>Lorem Ipsum</i></div>
    <div class="text"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</i></div>
    <div class="button"><a href="#">text link</a></div>
</div>
    <!-- 4 -->
<div class="container">
    <div class="img"><img src="http://1.bp.blogspot.com/_1eIdJ43s3yE/Sw1h8khv0FI/AAAAAAAAEic/L0FzKdsbxkU/s1600/usa-flag.jpg" alt="" width="194" height="104"/></div>
    <div class="title"><i>Lorem Ipsum</i></div>
    <div class="text"><i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book..</i></div>
    <div class="button"><a href="#">text link</a></div>
</div>

CSS:

body {
    background-color: #BDC3C7;
}
.container{
    background-color:#ECF0F1;
    width:300px;
    height:450px;
    border-radius: 20px;
    float: left;
    position: relative;
    margin-left: 20px;
}   
.title {
    height:35px;
    color:white;
    font-size:28px;
    text-align:center;
    background-color:navy;
    background-image:url(img/strip.jpg);
}
.img{ 
    background-color:#2C3E50; 
    border-radius: 20px 20px 0 0;
}
img {
    display: block;
    margin: 0 auto;
    padding: 10px;
}
.text{
  font-size:18px;
  margin-top:15px;
  margin-left:25px;
  margin-right:25px;
}
.button{
    width:100%;
    height:33px;
    background-color:#2C3E50; 
    position: absolute;
    bottom: 0;
    font-size:25px; text-align:center;
    border-radius: 0 0 20px 20px;
}
a { 
    text-decoration:none;
}
a:link {
    color:#2ecc71;
}
a:hover {
    color:#3498db;
}