HTML/CSS - How can I change the spacing or add whitespace so the boxes are equal? - html

Question

I'm new to the frontend and work out of the backend. I found a layout I am interested in using however noticed that when typing in these boxes if the text length isn't equal the sizing of the box changes for one of the boxes in the row and not all.
I want them all the be sized equally so if one box is using one line of text and the others two lines, the one line provide white space to match the size.
E.g.
I'd like all the boxes on that row to add in the whitespace so the boxes are equal in size so I don't get the layout issues since in the pic above.
Like this:
How do I change the css for the boxes to automatically resize all the boxes and not just one?
This is the layout I am using: http://adapt-trackers.blogspot.in/

Answer 1

It seems as though right now their spacing is determined by the margin/padding/border values. Try setting a height and width so that they are all the same.
For example:
#selectable li { margin: 3px; padding: 1px; float: left; width: 165px; height: 160px; font-size: 1.5em; text-align: center; }

Answer 2

try this (courtesy of CSS the Missing Manual):
<div id="gallery">
<div class="figure">
<div class="photo">
<img src="../images/carpet.jpg" alt="Carpet Grass" width="200" height="200" /> </div>
<p>Figure 1: Even the carpet-like <em>Carpetorium Pratensis</em> requires mowing. </p>
</div>
In this example, the gallery div wraps all the images together; the photo class wraps each image and caption together. Here's the CSS:
.figure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.photo {
background: url(drop_shadow.gif) no-repeat right bottom;
}
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}
Also, there's several gallery frameworks that you could use instead. Or stag some code from dynamicdrive.com

Answer 3

I'd give your tag for ... a minimum height.
add class to your anchor tags:
Link:
...
css:
.link-title{
min-height: 150px;
}