Jump to content

It works, but WHY?


daddyalfie

Recommended Posts

OK! I shall try to explain my question as concisely as possible. I guess, first take a look at the page in question HERE

 

See the yellow horizontal background stripe behind the Home/January links? I wanted to better tie in the Year 2011 with its associated months below. I added a div <div class="yellowBKG"> that encloses the "dropmenu" div, but the yellow stripe appeared behind the red Year links!

 

In order to make it positioned correctly I had to add margin-top: 51px; in the CSS.

 

Why oh why should that be?

 

I know I shall make a headlong rush into a brick wall when I hear the answer which will make me feel stupid! Again!

 

Thanks y'all!

 

Alfie

Link to comment
Share on other sites

The source of the issue is that you have floated your menu items within .navigation, yet haven't used the overflow property to make sure that .navigation properly contains the floated elements. Adding "overflow:hidden" to .navigation should fix your issue, and you can remove the margin-top.

 

Ben! That worked perfectly! Can you explain what overflowed what? I guess I do not understand the "overflow" property.

 

OOdles of thanks!

 

Alfie

Link to comment
Share on other sites

As far as I understand it, your floating the navigation elements removes them from the document flow, so .navigation appeared like it had nothing in it, and thus had no/little height. The overflow property allows .navigation to properly enclose floated elements.

 

Do-do do-do dodododo(Twilight zone theme.)

 

Weird, but what you said worked wonderfully. Thanks so much!

 

Alfie

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...