CODEWITHSUNDEEP
htmlcssalignment
DWB
DWB

Reputation: 1554

Two divs side by side, one centered and the other one float right

Embarrassingly, I'm having trouble making one div (of any length) centered and one div (of any length) floating on the right. So I have a container with menu buttons that are centered and a link to the users control panel on the right. It should look something like this

 ----------------------------------------------------------------------------
|                       |----Menu Items----|                |--ControlPanel--|
 ----------------------------------------------------------------------------

I know, this question has probably been asked a few times but I've searched through and through and they all seem to rely on percentages or fixed widths.

I have a container

.container {
    height: 50px;   
    width: 100%;
    padding: 10px 10px;
}
.menublock {
    width: 200px;
    margin: 0 auto;
    padding: 0;
}
.controllinks {
    float:right;    
}

The html is like this 

<div class="container">
    <div class="menublock">
        <span class="menuitem">Streams</span>
        <span class="menuitem">Profile</span>
        <span class="menuitem">Friends</span>
    </div>
    <div class="controllinks">
        A link the users control panel
    </div>
</div>

By changing menublock and controllinks to display:inline-block (or inline) I can get them on the same line just fine. .menublock does not seem to like being centered in this display and margin: 0 auto; doesn't work. I was messing around with .menublock display:table but that didn't want to stay on the same row.

Upvotes: 4

Views: 4574

Answers (3)

DWB
DWB

Reputation: 1554

Both Merlin's and James' solutions worked well. They all achieved the same result.

Another solution I just found was adding text-align: center; to the .container class. It turns out inline elements respond to text-align (although it seems strange to think of divs in this way).

Upvotes: 1

Merlin Denker
Merlin Denker

Reputation: 1418

Maybe it was too easy so you didn't even try it, but this fixed the thing in my test file: Just swap the order of <div class="controllinks"> and <div class="menublock">:

<div class="container">
    <div class="controllinks">
        A link the users control panel
    </div>
    <div class="menublock">
        <span class="menuitem">Streams</span>
        <span class="menuitem">Profile</span>
        <span class="menuitem">Friends</span>
    </div>
</div>

Upvotes: 8

James G.
James G.

Reputation: 2904

An easy solution is to use absolute positioning.

.container {
    height: 50px;   
    width: 100%;
    padding: 10px 10px;
    /*this makes the child divs relative to the parent*/
    position:relative;
}
.menublock {
    width: 200px;
    margin: 0 auto;
    padding: 0;
}
.controllinks {
    /*this puts the controllinks on the right. 
    Be warned, that if the page is too small, controllinks can no overlap on menublock. 
    This can be fixed with media queries.*/
    position:absolute;
    right:0px;  
}

Upvotes: 3

Related Questions