Div inside Div align?

Question

This is my code >> http://jsfiddle.net/374Rk/1/

<div class="container">
    <div class="logo"></div>
    <div class="buttons"></div>
    <div class="chef"></div>
    <div class="social"></div>
</div>

As you can see, I have several divs inside a big div container. Everything is centered, but I want the social div (last one) to stick to the right, with a margin of 20 px so everything is in place. Which one is the best way to do this?

If I give social a relative position, I could do this by simply adding the right property with 590px. Is this the correct way to do it? It's not that elegant! Also, if I float it right, it won't be anymore on the container (because I floated it).

This has been always bugging me while working on CSS. I hope you guys can help!

Answer 1

What you need to do is set the floating of your .social-div to right. To let the wrapper still wrap all of its childs a clearfix can help:

HTML:

<div class="container">
    <div class="logo"></div>
    <div class="buttons"></div>
    <div class="chef"></div>
    <div class="social"></div>
    <div style="clear:both;"></div>
</div>

CSS:

.social {
    width: 200px;
    height: 25px;
    float:right;
    margin-right:20px;
    background-color: #FF0;
}

http://jsfiddle.net/AvLU8/

Answer 2

If you don't want to float it (and correct everything), you could add text-align: right; to the .container and display: inline-block; margin-right: 20px; to .social.

http://jsfiddle.net/374Rk/3/

But I don't know what you want inside each div. So, probably you'll need to add text-align: left; to each div.

Answer 3

Martínez,
I have read out your query and find a solution using JQuery.

$(document).ready(function() {    
    $('.container div').each( function() {   
        container = $(this).attr('class');  
        content = $(this);  
        if(content == "social"){  
            $( ".container" ).addClass( "social" );  
        }  
    });  
});

Check on below url
http://jsfiddle.net/374Rk/30/

Answer 4

Check this

http://jsfiddle.net/374Rk/17/

.social{
    width: 200px;
    height: 25px;
    background-color: #FF0;
    margin-right:0px;
    margin-left:590px;
}