View Full Version : Display search bar and links side by side (list or float?)

11-16-2011, 02:23 AM
Hi guys,

being fairly new to this, Im starting to pull my hair out trying to get this to work. Im more of a 'graphic' designer than web, but anyway, on to the problem.

I have this menu with a search bar and links that i want to display underneath it:


Here is what i have at the moment:


the navigation works great, the logo lines up, but i cannot figure out how to get the search bar, search button and three icon links to line up horizontally.

I thought I could float them all as separate DIVs, but i couldnt seem to get that to work. I noticed other sites that had used a <li> to do this as well, but again im not sure i can nest a <div> inside a <li> element - especially the search bar.

Any suggestions would be appreciated!

11-16-2011, 02:50 AM
Hello plaedien,
Floats are how you usually get different elements beside each other. Have a try with this - .search ul li {float: left;}

11-16-2011, 03:00 AM
and there it is!

I cant believe i didnt pick up on that tiny little detail- thank you :D