CODEWITHSUNDEEP
htmlcss
user559142
user559142

Reputation: 12517

Align divs horizontally

I have the following Divs:

   <div class = "left">
     <div class = "custimage"><img src = "img/notch.jpg" alt = "notch"/><p>Notch</p></div>
     <div class = "custimage"><img src = "img/peak.jpg" alt = "peak"/><p>Peak</p></div>
     <div class = "custimage"><img src = "img/shawl.jpg" alt = "shawl"/><p>Shawl</p></div>
   </div>

The CSS:

.left {
    position: relative;
    float: left;
    width:600px;
    height:200px;
    background-color: #000;
    opacity: 0.7;
}

.custimage{
   position:relative;
   margin-top: 15px;
   margin-left: 15px;
   height: 170px;
   width: 130px;
   background-color: #999;
   text-align:left;
}

.custimage p{
    color: #fff;
    font:normal 60%/1.5 Helvetica, Arial, sans-serif;
    padding-left: 5px;
}

The images don't align horizontally though:

http://www.everry.com/new/customise/customisenow.html

What am I doing wrong?

Upvotes: 3

Views: 19889

Answers (3)

Flyingmana
Flyingmana

Reputation: 305

two ways:

first: add float:left to your .custimage

second: instead of float, add display:inline-block to your .custimage.

The second one does not work in older Browsers, but is way more cleaner than let all float around.

Upvotes: 2

afkbowflexin
afkbowflexin

Reputation: 4089

Add float: left to .custimage .

Upvotes: 2

aziz punjani
aziz punjani

Reputation: 25776

Apply a float:left on .custimage

.custimage{
   position:relative;
   margin-top: 15px;
   margin-left: 15px;
   height: 170px;
   width: 130px;
   background-color: #999;
   text-align:left;
   float: left;  // float all cust images to the left so they stack up against each other
}

Upvotes: 9

Related Questions