CODEWITHSUNDEEP
htmlcssheightwidth
Jess McKenzie
Jess McKenzie

Reputation: 8385

CSS Working out equal heights

I have the following html and I am very confused about the following:

How can I using CSS equal the columns so that my .button div is equal throughout all columns?

My columns are height:200px; by width:195px;

Example Column :

<div id="priceTable">
 <div class="rowOne">
  <p class="title">Name</p>
 <ul class="rowOneItems">
  <li>Custom Design</li>
 </ul>
   <div class="button"><a href="#">Buy Now</a></div>    
 </div> <!-- Column One --> 
</div>

Current CSS:

#priceTable{
    width:780px;
    height:230px;
    margin:0 auto;
    overflow:hidden;
    background:gray;
}
.rowOne, .rowTwo, .rowThree{
    float:left;
    height:225px;
    width:195px;
    margin:0 40px 0 0;
    background:red;
}

#priceTable .title{
    font-weight:bold;
    text-align:center;
    color:#000;
}

#priceTable .button{
    background:green;
    background:url('../images/button.png') no-repeat;
}

Upvotes: 0

Views: 113

Answers (2)

seanbun
seanbun

Reputation: 942

Could you set the .rowNumberItems to certain height and overflow: hidden? Once the height of the rowNumberItems is fixed, the button locations would be equal.

.rowOneItems{height:200px;overflow:hidden;}

For example: http://jsfiddle.net/3bmrZ/

Upvotes: 0

iambriansreed
iambriansreed

Reputation: 22241

Fiddle: http://jsfiddle.net/iambriansreed/ZJhPq/

Add the following CSS:

.rowOne, .rowTwo, .rowThree {
    position: relative;
}

#priceTable .button {
    position: absolute;
    bottom: 0;
}

Upvotes: 1

Related Questions