CODEWITHSUNDEEP
htmlcsspositioncss-float
AMC
AMC

Reputation: 1695

horizontally aligning elements within separate divs

I have 3 elements(logo, nav, social icons), all in different divs that I need to align horizontally. I've tried various combinations of float, clear, padding, margin, etc and nothing seems to work quite right. What am I missing?

live site fiddle

html

<div id="header">
        <a class="logo" href="#"><img src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" /></a>
        <nav>
            <?php wp_nav_menu( array('menu' => 'nav' )); ?>
        </nav><!-- end nav -->

    </div><!-- end header -->
<div id="sidebar">
    <div class="social">
        <ul>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="instagram" /></a>
                <ul>
                    <li><a href="http://instagram.com/#/">a</a></li>
                    <li><a href="http://instagram.com/#/">b</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/youtube.png" alt="youtube" /></a>
                <ul>
                    <li><a href="http://www.youtube.com/user/#">a</a></li>
                    <li><a href="http://www.youtube.com/user/#">b</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/facebook.png" alt="facebook" /></a>
                <ul>
                    <li><a href="http://www.facebook.com/#">a</a></li>
                    <li><a href="http://www.facebook.com/#">b</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/twitter.png" alt="twitter" /></a>
                <ul>
                    <li><a href="https://twitter.com/#">a</a></li>
                    <li><a href="https://twitter.com/#">b</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/lockerz.png" alt="lockerz" /></a>
                <ul>
                    <li><a href="http://lockerz.com/u/#">a</a></li>
                    <li><a href="http://lockerz.com/u/#">b</a></li>
                </ul>
            </li>
        </ul>
    </div><!-- end social -->

css

#header {
    height: 40px;
    padding-bottom: 40px;
    padding-top: 80px;
    vertical-align: middle;
    width: 700px;
}

#header .logo {
    display: block;
    float: left;
    width: 285px;
    height: 40px; /*added*/
}

#header .logo:hover {
    background: url('img/logo_hover.png') no-repeat;
}

#header .logo img {
    display: block;
}

#header .logo:hover img {
    display: none;
}

#header nav {
    clear: both;
    float: right;
    padding-left: ;
    padding-top: 10px;
}

#header nav ul li {
    display: inline;
}

#header nav ul li a {
    color: #333333;
    font-family: amatic;
    font-size: 150%;
    padding-right: 25px;
}

#header nav ul li a:hover {
    color: #c6e000;
}

#header nav ul li a:last-child {
    padding-right: none;
}

#header nav .current-menu-item a {
    color: #c6e000;
}

/* Sidebar */

#sidebar {
    clear: both;
    float: right;
    width: 230px;
}

#sidebar .social {
    float: right;
    list-style: none;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-right: 23px;
}

#sidebar .social ul {
    position: relative;
}

#sidebar .social ul li {
    display: inline-block;
}

#sidebar .social ul li ul {
    display: none;
    padding: 0;
}

#sidebar .social ul li a {
    display: inline;
    padding-left: 6px;
    font-size: 75%;
    white-space: nowrap;
}

#sidebar .social ul li:hover ul {
    display: block;
    position: absolute;
}

#sidebar .social ul li:hover ul li {
    background: #c6e000;
    display: block;
    text-align: right;
}

Upvotes: 2

Views: 5181

Answers (3)

andyb
andyb

Reputation: 43823

As an alternative to floating content you could use positioning to move the sidebar to the right of the content.

By making the following changes, you would have more control over where elements are placed, as position:absolute means to:

position it at a specified position relative to its closest positioned ancestor or to the containing block.

from the MDN documentation.

So by giving the #container a position allows absolute positioning of elements inside that container.

#container {
    margin: 80px auto 0; /* move the 80px padding from the content to the whole container */
    position: relative;  /* enables absolute position to work */
}

#header {
    padding-top: 80px;   /* remove */
}

#sidebar {
    clear: both;         /* remove */
    float: right;        /* remove */
    margin-top: -83px;   /* remove */
    width: 230px;        /* keep */
    position: absolute;  /* add absolute positioning */
    right: 0;            /* on the right */
    top: 0;              /* at the top */
}

Upvotes: 1

Zyad Sherif
Zyad Sherif

Reputation: 929

You should nest the streams div inside of the header, then you can manipulate the sidebar to get it aligned with the header.

Also remove the clear: both; from the #header nav

Upvotes: 0

Nick R
Nick R

Reputation: 7784

To get the nav bar to line up with the logo

#header nav - remove clear:both;

For the sidebar

Add

#sidebar {margin-top:-114px; }

This is a hacky solution for the social icons. It's probably worth increasing the width of the header and adding the social buttons to the header div.

Upvotes: 0

Related Questions