I'm facing an issue with designing a website: The top navigation bar on this site consists of the number of search results found, a search bar, and login methods.
My question is how can I align the "websitelocation" div and search input to the left, and the "loginMethods" div aligned to the right within the top bar?
I attempted setting the left property in the css for the loginMethods div but it had no effect.
You can view the layout setup on jsfiddle here: http://jsfiddle.net/UZSpz/ .
Code :
html
<body>
<nav>
<a href="#"><h1 class="logo">project</h1></a>
<ul>
<li id="events_list">
<a href="#events">
<img src="img/menu/services2.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
<p class="eName">Events</p>
</a>
</li>
<li id="users_list">
<a href="#following">
<img src="img/menu/crowdsourcing.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
<p class="eName">Users</p>
</a>
</li>
<li>
<a href="#messages">
<img src="img/menu/comment25.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
<p class="eName">Messages</p>
</a>
</li>
</ul>
</nav>
<div class="topbar">
<div class="websiteLocation">
<img src="img/dark.png" width="25px" height="15px" style="margin-top:10px;margin-right:7px;" />3 events found..
</div>
<input type="text" class="inputSearch" value="Search events.." />
<div class="loginMethods">asdasds</div>
</div>
<div class="content">
content
</div>
</body>
css
[CSS code follows...]
If there are any errors in my code, please let me know. Thank you!
Thank you!