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!
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;
}