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

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 div s to the left, and they will all be beside each other. From there, you can modify the width of each of the div s 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 div s.

`.lfloat{
float: left;
}`