Css Problems Alignment

[MarkT]

Hello,Sorry I'm experiencing problems with my css,

#title {width: 200px;height: auto;margin-top: -10px;margin-left: 20px;background-color:#000;border-radius: 2px;color: #DF3A01;}#search {width: 600px;height: auto;color: #FFF;margin-top: 28px;position: absolute;margin-left: 190px;display: inline;}#buttons {width: 300px;height: auto;color: #FFF;margin-top: 28px;position: absolute;margin-right: 30px;display: inline;}#buttons li {border-left: 2px dashed #FE9A2E;padding: 5px 5px 5px 5px;display: inline;}#buttons ul {display: inline;}#bar {margin-left: -15px;margin-right: -15px;margin-top: -12px;width: 110%;height: 50px;background-color: #000;position: fixed;border-radius: 3px;padding-left: 15px;padding-right: 15px;padding-top: 12px;}

and my html;

<div id="bar"><div id="title"><h1 color="#FE9A2E" style="float: left;">PitchIT</h1></div><div id="search"><?PHP// Array for Config variables$Config['CanSearch'] = false; // Falseif($Config['CanSearch'] == true){    echo 'form name="search" method="post" action="<?=$PHP_SELF?>"><input type="text" size="50" name="query" placeholder="Enter Search Query Here..." /> by<Select NAME="field"><Option VALUE="name">Name</option><Option VALUE="email">Email</option><Option VALUE="id">ID</option></Select><input type="hidden" name="searching" value="yes" /><input type="submit" name="search" value="Search" /></form>';}else{    echo 'Search Currently Unavailable!';}?></div><div id="buttons"><ul><li>Bob</li><li>Bob</li></ul></div></div>

But it shows as the image attached below. The bob li's show up in the middle f the search and title.they're meant to be on the far right.... Thanks in advance!all help appreciated!

[MarkT]

Problem Solved. Action: Added:

Float:right;

Edited May 30, 2013 by MarkT

[newseed]

Glad you got it positioned correctly. I like to add that you are really using was too much css to get this kind of results. Not sure why border-radius is being used. Your #bar background is set to black but you have it called in a few other places as well which is redundant. You also need to apply css reset forcing all tags to zero out the default margins and padding. * {margin: 0; padding: 0;} Here's a stripped down css version that you may want to use:

* {margin: 0;padding: 0;}#bar {height: 60px;background-color: #000;position: fixed;padding-left: 2%;padding-right: 2%;width: 96%;}#title h1 {line-height: 60px;color: #DF3A01;padding-right: 20px;}#search {color: #FFF;float: left;line-height: 60px;padding-right: 20px;float: none;width:470px;margin: 0 auto;}#buttons {color: #FFF;float: right;padding-left: 0px;}#buttons ul {line-height: 60px;}#buttons li {border-left: 2px dashed #FE9A2E;padding: 5px 5px 5px 5px;display: inline;}

[MarkT]

Glad you got it positioned correctly. I like to add that you are really using was too much css to get this kind of results. Not sure why border-radius is being used. Your #bar background is set to black but you have it called in a few other places as well which is redundant. You also need to apply css reset forcing all tags to zero out the default margins and padding. * {margin: 0; padding: 0;} Here's a stripped down css version that you may want to use:

* {margin: 0;padding: 0;}#bar {height: 60px;background-color: #000;position: fixed;padding-left: 2%;padding-right: 2%;width: 96%;}#title h1 {line-height: 60px;color: #DF3A01;padding-right: 20px;}#search {color: #FFF;float: left;line-height: 60px;padding-right: 20px;float: none;width:470px;margin: 0 auto;}#buttons {color: #FFF;float: right;padding-left: 0px;}#buttons ul {line-height: 60px;}#buttons li {border-left: 2px dashed #FE9A2E;padding: 5px 5px 5px 5px;display: inline;}

Thanks for the stripped down code,Although I haven't used it, it would do the trick. I fixed it using Float:right;