Aligning header elements (text / logo / nav) within a div - css

Question

Okay, so will confess to being completely new at this. I am a designer, first and foremost and trying to learn how to code by dismantling pre-built templates and studying them.
What I want to do is - have a short line of text (left float), a centered logo (whose width / height may vary upon finalization), and a text nav (right float). I am modifying a theme.
Here is what I have:
<header id="header" class="wrapper<?php if (get_option($prefix.'_width') == "width_full") { ?>_full<?php } ?>">
<div class="header_top clearfix">
<div id="logo" class="left_float">
<a class="logotype" href="index.php"><img src="<?php echo get_option($prefix.'_logo', 'images/logo.png'); ?>" alt="Logotype"></a>
</div>
<?php if(function_exists('wp_nav_menu')) : ?>
<?php
wp_nav_menu(
array(
'theme_location' => 'primary-menu',
'container' => 'nav',
'container_id' => 'nav',
'container_class' => 'right_float',
'menu_class' => '',
'menu_id' => '' ,
'walker' => new custom_menu_output()
));
?>
<?php else: ?>
<nav id="nav" class="right_float">
<ul>
<?php wp_list_pages('title_li=&depth=0'); ?>
</ul>
</nav>
<?php endif; ?>
</div>
Below is the CSS. I've tried to interchange the .left_float with the .center class as a test, but it ends up pushing the nav downwards.
.left_float {
float: left;
}
.center {
display: block;
margin-left: auto;
margin-right: auto }
.right_float {
float: right;
}
Long post - sorry! Any help would be appreciated - even some links where I can read and learn and get started on my own.
Thanks a bunch!

Answer 1

Part 1: First of all, there is no <div> with class center in your code. Start off by putting all of your code that's between the left_float and right_float <div> tags into its own <div class="center">...</div> tag. I'm assuming you want something like:
<header id="header" class="wrapper<?php if (get_option($prefix.'_width') == "width_full") { ?>_full<?php } ?>">
<div class="header_top clearfix">
<div id="logo" class="left_float">
<a class="logotype" href="index.php"><img src="<?php echo get_option($prefix.'_logo', 'images/logo.png'); ?>" alt="Logotype"></a>
</div>
<div class="center">
<?php if(function_exists('wp_nav_menu')) : ?>
<?php
wp_nav_menu(
array(
'theme_location' => 'primary-menu',
'container' => 'nav',
'container_id' => 'nav',
'container_class' => 'right_float',
'menu_class' => '',
'menu_id' => '' ,
'walker' => new custom_menu_output()
));
?>
<?php else: ?>
</div>
<nav id="nav" class="right_float">
<ul>
<?php wp_list_pages('title_li=&depth=0'); ?>
</ul>
</nav>
<?php endif; ?>
</div>
<br clear="all" />
You'll notice I added <div class="center">...</div> and added <br clear="all" /> (which is important for the next part...)
Part 2: Change your CSS to:
.left_float, .center, .right_float {
float: left;
}
But make sure you keep the new <br clear="all" /> in your code! With that at the end, you can float all divs to the left, and they will all be beside each other. From there, you can modify the width of each of the divs to whatever you'd like!
Well, I hope that helps,
Hope4You

Answer 2

Your wp_nav_menu is without any div. Enclose is withing a div and add just a single class class=lfloat to all the three divs.
`.lfloat{
float: left;
}`