daddyalfie Posted December 12, 2010 Report Share Posted December 12, 2010 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted December 12, 2010 Report Share Posted December 12, 2010 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. Quote Link to comment Share on other sites More sharing options...
daddyalfie Posted December 12, 2010 Author Report Share Posted December 12, 2010 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted December 13, 2010 Report Share Posted December 13, 2010 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. Quote Link to comment Share on other sites More sharing options...
daddyalfie Posted December 13, 2010 Author Report Share Posted December 13, 2010 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted December 13, 2010 Report Share Posted December 13, 2010 This might help explain things: http://www.quirksmode.org/css/clearing.html Quote Link to comment Share on other sites More sharing options...
virtual Posted December 13, 2010 Report Share Posted December 13, 2010 Or this http://gtwebdev.com/workshop/floats/enclosing-floats.php Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.