Tag Archives: css

Aligning Navbar to both Left and Right

Aligning a Navigation Bar to both the Left side and the Right sides:

I have always thought it would be nice to have a navigation bar that aligns text to both the left and the right, so I finally took the time to get this working. Once I figured it out, it was very simple to setup.

So on the left you’ll have this:


And on the right you’ll have this:


It is as simple as an html table. Yep. Just think about it. Your navigation bar is a single row, with two columns. I set my left column to 70% and my right column to 30%. Then I can align each table to the left or right.

I set the entire table inside an unordered list, then each page link is just an li or a list item. Your header.php file will probably look similar to mine, but without the table. What you choose to do with your newly-balanced right side is up to you. I am displaying the current time with a greeting depending on the time of day. At my office we are displaying the visitors IP address (very handy on a LAN).

<div id="navbar">
	<ul>	
		<table width="100%">
			<tr>
		<td width="80%"><li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
		<?php wp_list_pages(); ?>
		<?php wp_list_categories(); ?>
		</td>
		<td width="20%" align="right"><div id="txt"></div></td>
			</tr>
		</table>	
	</ul>
</div>