How To: Vertical aligning text in div

Stop text being vertically aligned to middle in Div in IE

[Demaestro]

I have a main content div that has all the text vertically aligned to the middle in IE7 and it is driving me crazy. I have tried everything I can think of to get it aligning to the top.

#mainContent {
margin: 0 0 0 250px;
padding: 0 20px;
vertical-align: top;
}

<div id="mainContent">
<h1>Travel And Accomodations</h1>
<p>A bunch of text</p>
</div>

I have tried adding these tags to the div:
valign="top" style="vertical-align:top;"

I have tried adding those same values to the CSS rather then the tag itself and nothing is working.... it continues to align middle... FireFox keeps it at the top.

Any insight would be so appreciated.

[Marshall]

Default is top. Try not putting in vertical-align. The only other thing that comes to mind is if you have another style that has vertical-align: middle that may be overriding.

Marshall

[Demaestro]

I took that out and still no luck... this is really weird and I am getting frustrated because it just shouldn't be doing it.

If you have time Marshall would you mind having a look. I Pm'd you an URL

[Xapti]

Make sure you have a proper doctype... might be some IE7 quirks thing?

What's more likely, but still unlikely: you have padding/margin-top on the H1 element somewhere (or maybe on some other element) causing it to appear as if it's middle aligned.

[Demaestro]

Had a stupid <br><br> between some other floating divs and it was pushing it down.

Now i have a new issue where my float:right; on an image is aligning in the middle in FF and works in IE.... arg.. my first time making a site in DW and all these problems with a default template.

Not sure if I am saving time using it or not... then again this is my first kick at the can with this tool.

[Marshall]

Demaestro,

Are you talking about the map image?

Marshall

[edited by: Marshall at 11:09 pm (utc) on June 29, 2007]