Menu
I am having a heck of a time with an alignment issue. I am attempting to vertically center align items of a non-fixed height (images and text from a database). The number of items(e.g. columns) varies, depending upon the database. The text varies in length based on the database.
All I want to do is vertically align all the information within the div class hz. As alluded to, I cannot specify a height, for inevitably it will be wrong since it is database fed. Because the number of “columns” varies, I have everything float to allow for proper positioning. HELP – please!!!
[CODE]<HTML><HEAD><meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<STYLE TYPE=”text/css”>
#ctnr { width: 762px ; margin-left: auto ; margin-right: auto ; background-color:#FFFFCC; border:3px solid; color:#71371C; }
#qr { padding:15px; background-color:#FFFFCC;font-family: “Trebuchet”, Verdana, sans-serif;}
.h{text-decoration: none; font-size: 18px; color: #71371C; font-weight: bold; }
.qs{padding-top:16px;padding-bottom:8px;text-decoration: none; font-size: 16px; color: #71371C; font-weight: bold; clear:left;}
.hzsubq{text-decoration: none; font-size: 16px; color: #71371C; font-weight: normal; float:left;width:250px;}
.hz{margin-left:0px;text-decoration: none; font-size: 16px; color: #71371C; font-weight: normal; clear:left;}
.hz1,.hz2,.hz3,.hz4,.hz5,.hz6,.hz7,.hz8,.hz9,.hz10 {float:left;clear:none;text-align:center;}
.hz1{width:100px;}
.hz2{width:100px;}
.hz3{width:100px;}
.hz4{width:100px;font-size:14px;}
.hz5{width:85px;font-size:14px;}
.hz6{width:70px;font-size:12px;}
.hz7{width:60px;font-size:12px;}
.hz8{width:40px;font-size:12px;}
.hz9{width:30px;font-size:12px;}
.hz10{width:30px;font-size:12px;}
.fftxt{margin-left:150px;}
.btn {text-align:center;}
.btn input{font-size=16px;color: #71371C; border: 1px solid; background: #F0EBE7; margin: 3px; padding: 2px;}
input, textarea, select { color: #71371C; border: 1px solid; background: #F0EBE7; margin: 3px; padding: 2px; }
img {border-style:none;}
body{background-color: white;}</STYLE>
</HEAD><BODY onContextMenu=’return false’><FORM method=”POST” action=”q.asp” onSubmit=”return cpl(1);”>
<div id=”ctnr”><div id=”qr”>
<DIV class=qs>In general, how useful are the following</DIV>
<div class=hz><div class=hzsubq> </div><div class=hz5>Not at All Useful</div><div class=hz5>Not Very Useful</div><div class=hz5>Somewhat Useful</div><div class=hz5>Very Useful</div><div class=hz5>Do Not Recall</div></div>
<div class=hz><div class=hzsubq>your brain</div><div class=hz5><IMG border=”0″ name=”cxF14ax248″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14ax249″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14ax250″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14ax251″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14ax252″ src=”yelhorizup.gif”></div></div>
<div class=hz><div class=hzsubq>your extremities (this is a sample that includes some longer text to help emphsize the problem)</div><div class=hz5><IMG border=”0″ name=”cxF14bx248″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14bx249″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14bx250″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14bx251″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14bx252″ src=”yelhorizup.gif”></div></div>
<div class=hz><div class=hzsubq>your feet</div><div class=hz5><IMG border=”0″ name=”cxF14cx248″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14cx249″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14cx250″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14cx251″ src=”yelhorizup.gif”></div><div class=hz5><IMG border=”0″ name=”cxF14cx252″ src=”yelhorizup.gif”></div></div>
<div style=”clear:both;padding-top:25px;”></div><DIV class=btn><INPUT type=”submit” name = “Continue” value = “Continue”></DIV>
</div></div></FORM></BODY></HTML>