Jump to content

Box Alignment


jackdsargeant

Recommended Posts

Hi all, On my website, www.anf1blog.com, all of the boxes of content on the homepage are different sizes. How can I make them all one size, with the box info (the read full post/add comments bit) aligned at the bottom of the box? The box.css code (which I think is relevant) is below.

.title{margin: 0 0 0 0px;padding: 0px 0px 0px 0px;}.sidim{float:none;margin:12px 10px 5px 0px;height:113px;width:289px;}.boximage img{border:1px solid #d29903;}.boxtitle{}.boxtitle h2{font-size: 15px ;}.boxtitle h2 a, .boxtitle h2 a:link, .boxtitle h2 a:visited  {color:#00aeef;background-color: transparent;}.boxtitle h2 a:hover  {color: #0182ae;background-color: transparent;}.box {width:308px;margin: 10px 10px 5px 0px;height:100%;color:#666;font: 13px Tahoma, century gothic,Arial,verdana, sans-serif;float:left;background:#f2f2f2;border:1px solid #ddd;}.box:hover {background:#dddddd;}.boxcover{padding:10px;}.boxinfo{width:308px;height:30px;background:#00aeef;overflow:hidden;position:relative;}.boxmore{float:left;width:100px;margin:5px 0px 5px 10px;display:inline;}.boxmore a:link, .boxmore a:hover,.boxmore a:visited{color:#fff;}.boxcoms{float:right;width:100px;margin:5px 10px 5px 10px;display:inline;text-align:right;}.boxcoms a:link, .boxcoms a:hover,.boxcoms a:visited{color:#fff;}.videopost{margin-bottom:10px;}.videopost embed{width:260px;height:200px;}

Thanks!

Link to comment
Share on other sites

This all depends on the number of lines of text in the title, and text below image. I have used the highest of 2 lines for title, 4 line for description text and used min-height to bring all the same size. min-height: 268px;

.boxcover {	min-height: 268px;	padding-bottom: 10px;	padding-left: 10px;	padding-right: 10px;	padding-top: 10px;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...