Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 464
  • Last Modified:

vertical align -baseline

hi - i need all of the content within the blue block to align at the bottom of the orange block so all of the "Artwork Piece Number 1"s line up:

http://ctemps.cjehost.com/thumbs2.php

below is the html - here's the 2 styles that im trying to tweak with "vertical-align:baseline" (and bottom) can't get either to work though  thanks!

.boxPadThumb{/*oh well! looks like you need to adjust both!*/
      padding:0 5px 16px 16px;
      float:right;
      min-height:200px;
      background:#FF9966;
      vertical-align:baseline;
      }

.fourColBox{
width:125px;
min-height:150px;
vertical-align:baseline;
float:left;
margin-left:0;
background:#00CCCC;
}


<div class="boxPadThumb"><!---begin thumb box-->
						<div class="fourColBox">
							<div class="img-shadow"><a href="#" class="imgOver"><img src="images/fpo_thumb_num3.jpg" border="0" /></a>
							</div>
							<div class="clr"></div>
<div  class="iconCTN">
							<div class="iconCart"><a href="#"><img src="images/cart_icon.gif" border="0" /></a></div>
							<div class="iconQuickView"><a href="#"><img src="images/quick_view_icon.gif" border="0" /></a></div>
						</div>
						<div class="thumbCaption">Artwork Piece Number 1</div>
						</div>
					<!---end thumb box--></div>

Open in new window

0
phillystyle123
Asked:
phillystyle123
  • 3
  • 2
1 Solution
 
David S.Commented:
vertical-align doesn't apply to floated elements.  Use display:inline-block instead (with the workarounds for IE5-7 and FF1-2):

http://www.dynamicsitesolutions.com/css/example-menus/4/
http://gtwebdev.com/workshop/layout/inline-block-gallery.php
0
 
phillystyle123Author Commented:
i don't get it - so i can't use

.thumbRow{
width:100%;
float:left;
vertical-align:bottom;
background:#00FFFF;
}

i don't get how using display:inline would help
0
 
David S.Commented:
vertical-align only applies to table-cells and inline elements. A floated element is neither.

display:inline-block is not the same as display:inline. display:inline-block allows you to have an element that can have a set width and height and yet participate in line-box formatting like inline elements do.
0
 
phillystyle123Author Commented:
hmm - i'm still not getting this -

check it out:

http://ctemps.cjehost.com/thumbs2.php

i notice that if i use position:relative; instead of float:right: i start to get the desired effect -however, it only works in ff - what am i missing - i'm trying to get all of teh green boxes to vertical-align:baseline;


.boxPadThumb{/*oh well! looks like you need to adjust both!*/
	padding:0 15px 0 15px;
	float:right;
	display:inline-block;
    vertical-align:baseline;
	margin-bottom:0;
	background:#00FF00;
	}

Open in new window

0
 
David S.Commented:
Remove the float:right declaration.

It's not as simple as just adding display:inline-block. Take a look at the code used in the examples I linked to in my first reply.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now