Some alignment issues that I need help with

[schwim]

Hi there everyone!

I’ve got this page, in which I’m trying to duplicate the header of this page. With your collective help and Google, I’ve muddled this far but I’ve got two issues that I’m not able to brute force my way through.

First, I need the cursive “Your Mountain Dreams” to push up, instead of vertically centered in the header. I’ve played with margin and padding top and bottom but I’m definitely barking up the wrong tree as it’s not getting me what I want.

Secondly, when you hover over “Search MLS” and “Area Info”, you can see that the flyout boxes dynamically stretch horizontally and are centered on the original template but on my version, they align left and push out toward the right and the widths are fixed. How do I center the flyout boxes like in the original template and have the flyout boxes dynamically widen to allow link text without wrapping it?

Thanks for your time!

[SamA74]

@schwim

I need the cursive “Your Mountain Dreams” to push up, instead of vertically centered in the header

It looks like the default vertical margins on the h1 element.
Try reducing the margiin-top on the h1 / .htitle element. There is also a small amount of padding-top on the #header element contributing to the placement of the title.

[schwim]

I did try to play with the padding-top of header but here’s what happens when set it to 0px:

Which doesn’t make any sense to me at all. Why would I get whitespace at the very top if I’m removing the padding?

Altering the htitle did the trick though and for that I thank you!

Any suggestion on centering the dropdown boxes instead of having them anchor at the left?

[SamA74]

@schwim

Why would I get whitespace at the very top if I’m removing the padding?

Because the margin-top is still there on the h1.
The padding on the header is only small, so taking it out will not have much effect.
But the h1 default vertical margin is quite large, that is the thing to reduce.

[PaulOB]

@schwim

I did try to play with the padding-top of header but here’s what happens when set it to 0px:

When you remove the padding then the top margin on the h1 collapses and pushes the parent away instead.

This is called collapsing margins and something you should make yourself familiar with