CODEWITHSUNDEEP
htmlcss
Moose
Moose

Reputation: 630

CSS rule which keeps text elements in line with each other?

I'm not too familiar with CSS rules. I'm looking for the behaviour which is responsible for keeping elements within a table in line with one another, like this:

In line

See how the add to cart buttons are lined up properly? On my website, when I increase the length of the text of the product name for example, it would shift the add to basket button downwards, making the styling less attractive.

Which rules are applied to keep them in line, like this?

still in line

Edit: This example in specific is from a demo installation of Magento 1.9, I couldn't find a direct link but here is how you can access it:

  1. http://installatron.com/magento/demo
  2. Click on Shop Men
  3. Click on New Arrivals

The code is actually enclosed within a div element containing a list. The class name is product-grid first last odd.

Upvotes: 0

Views: 113

Answers (2)

Wild Beard
Wild Beard

Reputation: 2927

Here's a pretty quick, basic, snippet of how it works.

Fiddle

EDIT

Changed code for OP's question. Works as desired.

.item_img {
    width: 100px;
    height: 120px;
    background: red;
}
.item_text {
    max-width: 100px;
    vertical-align: text-top;
}
table, tr, td {
    border: 1px solid black;
    border-collapse: collapsed;
}
<table>
    <tr>
        <td class="item_img"></td>
        <td class="item_img"></td>
    </tr>
    <tr>
        <td class="item_text">Item Text</td>
        <td class="item_text">Item textItem textItem textItem textItem textItem textItem textItem textItem textItem textItem text</td>
    </tr>
    <tr>
        <td><button>Add</button></td>
        <td><button>Add</button></td>
    </tr>
</table>

Upvotes: 1

Ricardo Casta&#241;eda
Ricardo Casta&#241;eda

Reputation: 5812

Example here: jsfiddle

Wrap each div.item inside a div.wrapper with relative position. Then each div.item must contain a div.controls where your actions wil be placed.
Div.controls must have position absolute; bottom: 0, this way it will be always on bottom side of the relative parent wrapper element. The parent wrapper element will increase height according the dynamic content of any div.item. 

.wrapper {position: relative} .controls {position: absolute; bottom: 0}


Each div.item must have a bottom space (padding-bottom) equal to the div.controls fixed height.
.item {padding-bottom: 100px} .controls {height: 100px}


COMPLETE CODE HERE:

.wrapper {position: relative; overflow: hidden}
.item {width: 200px; padding-bottom: 100px; float: left; margin-right: 5px}
.item {border-left: 1px solid; border-right: 1px solid; border-top: 1px solid;} /* not relevant*/
.controls {position: absolute; bottom: 0%; width: 100%; height: 100px; background: rgba(0,0,0,0.5)}


<div class="wrapper">
  <div class="item">
    <img src="http://dummyimage.com/160x160/000/fff">
    Lorem ipsum ......

    <div class="controls">
        <button>Button</button>
    </div>
  </div>

  <div class="item">

  </div>
  <div class="item">
  </div>
</div>

Upvotes: 1

Related Questions