Pushed horizontal nav by top margin

HTML & CSS
1

Buon Giorno from 8 degrees C wet & Damp wetherby UK :slight_smile:

OK… pn this page http://tutorial.davidclick.com/philpotts-clone.html i wanted the gorizontal nav to sit exactly half way across the header wrapper. I achieved this by pushing it down with a top margin eg:

#navigation2
{
float: left;
width: 900px;
background: #333;
margin-top:70px
;
}

Illustrated here - http://i216.photobucket.com/albums/cc53/zymurgy_bucket/postion-navcopy.jpg

So mY question is please could I have done this any other way or is my approach of forcing the horizontal nav southwards using margin top OK.

Grazie Tanto,
David

2

It seems fairly safe, though generally fixed heights, top and bottom px margins etc are asking for trouble. In this case, it seems pretty harmless, though.

3

Personally I would offset the parent container by 50% and set the top margin as a negative value based on half the height of the navigation bar itself as it will always ensure that the navigation container sits vertically centered regardless of if the parent height changes.

#navigation2 {
    background-color: #333;
    margin-top: -15px;
    overflow: hidden;
    position: relative;
    top: 50%;
    width: 900px;
}

Also on a side not I highly recommend you NEVER use floats to clear containers as you will cause yourself headaches later on down the track, whenever you have a parent container with floated child elements always try to use overflow: hidden or a .clearfix method which are much easier to work with and ensure a consistent layout in all browsers.

4

“I highly recommend you NEVER use floats to clear containers” - Yes thank you ia eas worried about that know i have the theory, big thank you :slight_smile: