Floating next to drop down menu

HTML & CSS
1

Hi Guys,

www.neverup-neverin.com

I have a drop down menu created in css as you can see, and then on the right I want to display a telephone number. As you can see they are both level (the drop down menu and telephone number) But I have achieved this by floating the <p> right and using a negative top margin to achieve this. Is this the best way to do this, or is there another way?

Thanks in advance

2

A better option would be to float the UL too:

.navbar ul {float: left;}

.navbar {
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
[COLOR="#0000FF"][s]height: 35px;[/s][/COLOR] /* remove */
background-color: #FFF;
margin: 0 auto;
font-size: 14px;
[COLOR="#FF0000"]overflow: hidden;[/COLOR] /* add */
}

.navbar p {
float: right; 
margin: 10px; 0 0;
}
3

Thats worked thank you.

Could you just explain to me what overflow: hidden does again please?

Cheers

4

Without it, you have the problem that all the contents of the container are floated. The best way to appreciate the implications of that is to try removing overflow: hidden. Suddenly the white container background disappears. That’s because a container doesn’t wrap around floated contents by default. Floats hang out of their container. There are various ways to force the container to wrap around it floated children, the easiest being to use the overflow property.

EDIT: I notice that you didn’t remove their height on the .navbar div, which is another way to hold the container open. However, it’s better not to set heights like that. If someone has fonts set large, for example, the nav links may get cut off.

I should also say that overflow: hidden isn’t a good option in this case, because you have a drop down list. Setting overflow: hidden on the container could mean that the sub links will get cut off. So in this case, I’d use another containment method.

Firstly, remove the height here:

.navbar {
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
[COLOR="#FF0000"]height: 35px;[/COLOR]
background-color: #FFF;
margin: 0 auto;
font-size: 14px;
}

Then add in these styles:

.navbar:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;	
}

If this is all gobbldygook to you, I put together a tutorial on this a while back.

5

Right I kind of get that, but will complete the tutorial to make sure!

I only made the changes to my index.html on my
Computer to test it. I haven’t uploaded the edited file to
The server yet.