CODEWITHSUNDEEP
htmlcss
NomenNescio
NomenNescio

Reputation: 3030

Center between two floating divs

I've searched around but can't find a solution,

I wrote the following HTML:

<div id="navcontainer">
    <div class="leftnav">
        <a href="/blabla.aspx">Home</a>
    </div>
    <div class="leftnav">
        <a href="/blabla.aspx">test1</a>
    </div>
    <div class="leftnav">
        <a href="/blabla.aspx">test2</a>
    </div>
    <div class="leftnav">
        <a href="/blabla.aspx">test3</a>
    </div>

    <div class="midnav">
        <a href="#">MIDDLE</a>
    </div>

    <div class="rightnav">
        <a href="/blabla.aspx">test5</a>
    </div>

    <div class="rightnav">
        <a href="/blabla.aspx">test6</a>
    </div>
</div>

With the following CSS:

#navcontainer div.leftnav
{
    float:left;
    text-align: left;
    vertical-align: middle;
    margin-left:6px;
    margin-top:6px;
}

#navcontainer div.midnav
{
    //
    // What do I put here?
    //
}

#navcontainer div.rightnav
{
    float:right;
    text-align: left;
    vertical-align: middle;
    margin-right:6px;
    margin-top:6px;
}

I want to center the MIDDLE div based on "navcontainer" but the div keeps getting based on how many 'leftnav' & 'rightnav' divs there are. Can anyone explain to me how to do it?

Upvotes: 1

Views: 1068

Answers (1)

kinakuta
kinakuta

Reputation: 9037

Came up with a better solution for what I think you're looking for - in this case I positioned the midnav absolutely:

#navcontainer {
    position: relative;
}
#navcontainer div.midnav {
    position: absolute;
    left: 50%;
}

Here's an updated jsfiddle to demonstrate. Is that what you're trying to do? Because of the absolute positioning, you'll want to adjust the css of the midnav to get the elements aligned vertically with the the left and right nav elements.

Upvotes: 2

Related Questions