CODEWITHSUNDEEP
css
Doug Fir
Doug Fir

Reputation: 21204

Why does sibling element align at the top?

I have a header with a structure along the lines:

<div class=wrapper>
   <div id="header">[insert divs html]</div>
   <div id="wordpressmenu">[insert divs html]</div>
   <div id="Social_Media_Menu">[insert divs html]</div>
</div>

The social media menu is new - I just added it this afternoon. Previously the Wordpress menu and logo (logo is within header div) were aligned right above my main menu. Since adding the social media menu, which has larger images, the wordpress menu and logo are now aligned incorrectly - they align with the top of the social media nav images.

I'd like to align wordpress menu where it was previously - the bottom. The two images below show this:

How it used to be (Correct alignment) enter image description here

Then added the div Social Media Menu enter image description here

Now there is a gap between the bottom of the logo and the main menu. There is also a gap between the original orange colored menu and the main nav.

Why is it doing this? I've tried setting the properties of the wordpress nav (The orange nav) and the social media nav to display: inline and given them fixed widths. No luck.

Can anyone see how to remove this gap so that the space between the main nav and the logo and orange nav are as they were before adding the social media buttons?

Website here (I honestly do not know which CSS to include) http://tinyurl.com/c8djrvr

Upvotes: 0

Views: 207

Answers (2)

RwwL
RwwL

Reputation: 3308

If you're looking for a quick-and-dirty fix, margin-top: -38px on #social probably gets you there, or close. Or use a combination of negative top margins on #social and #wpmenu until you've got exactly what you want.

It's lining up where it is because you have a 130px height set on #header — the tops of the #social and #wpmenu divs are lining up right along the bottom edge of that, as they should. #header doesn't grow to contain the slightly larger height (188px including top padding) of the logo image, it stays at the set 130px height. The logo is visible because overflow: visible is the default on div elements. I've illustrated this by adding rgba background colors to #header and #social via the Chrome dev tools. (.2 opacity green on #social, .2 opacity orange on #header).

enter image description here

Upvotes: 2

Silviu-Marian
Silviu-Marian

Reputation: 10907

That guy aligns that way because

  • the menu is a float:right, and block (display:block) floating elements tend to stick to the top.
  • the logo is wrapped in an <a> tag, and both are inline, so they respect the line-height on the header.
  • the social buttons force up that header's height, so all the elements go up

To be honest it's not really that way and the coding should be a little semantic, but it's pretty much what is doing.

Fix

#social{ 
    position:relative; 
    margin-top:-36px 
} /* I hope I got the alignment right */

Upvotes: 1

Related Questions