How I make my menu line-up horizontally with my logo?

Question

I want to have my logo in the top left and my menu in the top right - horizontally even with one another. How I do this? Once I put the logo it seem not want anything else across from it

Answer 1

Change this:
<div class="header"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><img src="Images/kurtlogo.fw.png" width="245" height="65" alt="logo" />
  <!-- end .header --></div>
  <div id="navigationbar"><nav><a href="index.html">Home</a> | <a href="about.html">About</a> | <a href="portfolio.html" class="navtext">Portfolio</a> | <a href="plogo.html">Logos</a> | <a href="contact.html" class="navtext">Contact</a></nav></div>
to this:
<div class="header">
<div class="logo">
<a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><img width="245" height="65" alt="logo" src="Images/kurtlogo.fw.png">
</div>
<div id="navigationbar"><nav><a href="index.html">Home</a> | <a href="about.html">About</a> | <a class="navtext" href="portfolio.html">Portfolio</a> | <a href="plogo.html">Logos</a> | <a class="navtext" href="contact.html">Contact</a></nav></div>
<!-- end .header --></div>
Basically, we're putting the #navigationbar within header as well. We're then enclosing the logo within another div - so we can float the logo div left and navigationbar div right.
Add this to your CSS:
.logo{
float: left;
Find #navigationbar in your CSS:
#navigationbar {
background-color:#0FF;
padding: 10px;
float: right;
Add the line in bold above (float).
For footer, find this:
.footer {
padding: 10px;
padding-left: 20px;
padding-right: 20px;
background-color: #0033ff;
position: absolute;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
background-image: url(Images/background.jpg);
width: 921px;
height: 128px;
top: 760px;
Remove position line that I've struck out.
Then, open portfoliomain.css file:
.f11 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FC3;
position: absolute;
Remove the line I've struck out.