I know this is a common question but I just can't seem to get it right. I have tried everything except the one thing that will make this work, including various placements and combinations of clear and overflow settings. Here's my code (stripped down for posting)
<style>
#message { border:thin red dashed; overflow:hidden; }
#message p { border:thin red solid; }
#line1 { border:thin blue solid; }
#text { text-align:center; background-color:#FCF; vertical-align:middle;}
#photo { float:left; width:160px; border:thick black solid;}
</style>
</head>
<body>
<div id="Main">
<div id="line1">
<div id="message" >
<div id="photo" > <!-- floated pic box -->
Pretend a picture is here. Pretend a picture is here.
Pretend a picture is here. Pretend a picture is here.
</div> <!-- photo -->
<div id="text"> Click here to see all Key West Tours, Attractions and Packages<br />
Buy Online and Save!
</div> <!-- text -->
</div> <!-- message -->
</div> <!-- line1 -->
</div> <!-- Main -->
I want the text to be aligned middle and realize it's because the actual text div (pink box) can align middle all day long and as long as it stays that height it won't change.
Question: How do I get my text div to grow to the height of the faux picture box so I can align it to the middle of that section?