problem vertically aligning within a div

[stevemtno]

Hi,

I've having problems vertically aligning 2 paragraphs and an image on the bottom of a <div>. I can't get them to come off the top of the <div>.

Here's my HTML:

<div id="contentHome">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eu dui ac lectus accumsan semper. Cras in felis. Suspendisse posuere turpis a est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed lacinia elit et lorem. Morbi facilisis leo in velit molestie aliquet. Maecenas
pulvinar quam non tellus. Curabitur ac turpis eget dui ullam corper hendrerit. Maecenas neque. Nulla dignissim risus at orci aliquet.</p>
<div id="interior"></div>
<p>Cras in felis. Suspendisse posuere turpis a est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>

</div>

Here's my CSS:

p {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#fff;
font-size:11px;
padding-left:25px;
}

#interior {
width:224px;
height:168px;
background-image:url(images/interior.jpg);
background-repeat:no-repeat;
float:left;
margin-left:25px;
margin-right:25px;
}

#contentHome {
background-image:url(images/home_content_bkgd.jpg);
background-repeat:no-repeat;
width:590px;
height:451px;
float:right;
}

Any help will be greatly appreciated.. thanks!

Steve (sorry about the HTML layout above)

[Centauri]

Can you provide a picture of what you are trying to achieve here - if the paragraphs and text are to be at the bottom, what is at the top? It doesn't make much sense to have empty space at the top unless you are allowing for a background graphic to display - in which case, top padding would be better than setting a height.

[stevemtno]

I've attached a jpg to this msg. Hope that helps explain what I'm trying to do.. thanks!

[Centauri]

In that case (I thought that may have been what you were doing), don't set a height on the contentHome div, and give the div a top padding enough to space the content downwards below the background image :#contentHome {
background-image:url(images/home_content_bkgd.jpg);
background-repeat:no-repeat;
width:540px;
padding: 170px 25px 0;
float:right;
}

p {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#fff;
font-size:11px;
}

#interior {
width:224px;
height:168px;
background-image:url(images/interior.jpg);
background-repeat:no-repeat;
float:left;
margin-right:25px;
} Note I also applied 25px side padding to the div (and subtracted this from the width) so the left margins on the interior div and the paragraphs are not needed.

[stevemtno]

We're heading in the right direction. The content still needs to come down about 30px tho (I'm guessing at the pixels here). Let me play around with it some more... thanks!!!

Steve

[Centauri]

I based the 170px off your example graphic - change that value to suit.

[stevemtno]

Well, I ended up changing all sorts of things. The CSS from before is now:

#interior {
width:222px;
height:166px;
background-image:url(images/interior.jpg);
background-repeat:no-repeat;
float:left;
margin-right:25px;
}

#contentHome {
background-image:url(images/home_content_bkgd.jpg);
background-repeat:no-repeat;
width:540px;
padding: 146px 25px 0px;
*padding: 157px 25px 0px;
float:right;
}

#contentHome p {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#fff;
font-size:11px;
padding:0px;
}

#contentHome img {
float:left;
padding:0px 20px 0px 0px;
}

The HTML from before is now (the real text):

<div id="contentHome">
<p><span class="welcome">Welcome to Foodies...</span></p>
<p>Our passion is providing our guests with an unparalleled culinary experience, either catered, carry-out or dining in. Our service is top-notch and we provide a friendly, relaxed atmosphere within an attractive European country-style setting. Foodies features dishes created with the freshest selections of each season, prepared in a unique and delicious style. Our menus change seasonally to ensure freshness and to utilize local farmers and growers.</p>
<p>Come in and experience the tastes of great food, prepared by a staff that is committed to serving you the best dining experience you could hope to find, every time you visit.</p>
<p>In addition to our full-service deli, our gourmet catering service specializes in meeting the needs of our Corporate, business and residential clientele. Whether you're need is for a meeting, graduation, wedding, Holiday Party or intimate gathering, every last detail is very important to us!</p>
<img src="images/interior.jpg" alt="Foodies" height="166" width="222"/><p>We service the greater St. Louis Metro area and are waiting to hear from YOU!</p>
<p>Contact our Catering Coordinator, Johnna Putnam, for an immediate consultation. She can also be reached by email at foodies1@XXXXXXXX.net.</p>
<p>Respectfully,</p>
<p>Greg Tournillon<br />
Chef and Owner<br />
Foodies Marketplace and Deli<br />
xxx.xxx.xxxx</p>
</div>


I'm not quite sure what is happening at this point. My wife (web guru) is having me 'freelance' on a couple pages to get my web skills up a bit. Honestly, I'm a bit overwhelmed. We had to modify several images in Photoshop, etc, to make things fit right. To make things worse, the Photoshop file was pretty 'sloppy'...

I've got the page looking good in Firefox (with the help of FireBug), IE7 is another story. Checking multiple browsers is a new experience for me (even tho I know it's the right way to do things). Prior to this, I only had to design for IE(6). Nothing else mattered.

Anyway, sorry for the 'rant'. Thanks for all your help. I really appreciate it. You definitely got me going in the right direction.

Steve

[Centauri]

You got a link to this uploaded somewhere ? - would make it easier to sort out.

[stevemtno]

Not yet, I'm just working locally right now. I'm gonna try to get something online later today...