Spread four images inside div [responsive] - html

Question

I have a div called Buttons with 100% width inside a floating sidebar. The sidebar has 30% width.
Inside the div Buttons I have four links with background-images. I want to center the four links inside the div, but they must spread (all have the same margin, but the left one should be completely left and the right one completely right). But: it should also work inside my Responsive website. So if I resize my window, they must also be centered. That is why I can't set margins in pixels.
Please help me!
Sorry for my English.
[EDIT: My code]:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="http://www.twitter.com" title="Twitter" target="_blank"></a>
<a id="facebook" href="http://www.facebook.com" title="Facebook" target="_blank"></a>
<a id="rss" href="rss.php" title="RSS" target="_blank"></a>
<a id="youtube" href="http://www.youtube.come" title="YouTube" target="_blank"></a>
</div>
</div>
CSS:
#sidebar{
float:right;
width:30%;
text-align:center;
}
#buttons{
width:100%;
}
#twitter,#facebook,#rss,#youtube{
height:40px;
display: inline-block;
margin-top:20px;
}
#twitter{width:40px;}
#twitter{background:url('/images/icons.png') 0 0;}
#facebook{width:40px;}
#facebook{background:url('/images/icons.png') -40px 0;}
#rss{width:40px;}
#rss{background:url('/images/icons.png') -80px 0;}
#youtube{width:40px;}
#youtube{background:url('/images/icons.png') -120px 0;}

Answer 1

Seeing your code would definitely help, but I'm guessing you're looking for something like this:
--edit--
Okay so it looks like we need to position these buttons absolutely, so try:
#buttons {
position: relative;
min-height: 40px;
}
#buttons > a {
position: absolute;
width: 40px;
height: 40px;
}
a#twitter { background: red; left: 0px; }
a#facebook { background: orange; left: 36%; margin-left: -20px; }
a#rss { background: yellow; left: 64%; margin-left: -20px; }
a#youtube { background: green; right: 0px;}
Aaand fiddle: http://jsfiddle.net/ttjAW/9/
You might need to adjust the left percentages because the buttons have fixed widths (its hard to do this using fixed and variable width elements...) I then applied a negative margin of half of the buttons width to centre them.
Does this do what you needed?

Answer 2

Use text-align: justify on your #buttons element to center the button elements perfectly and allow them to expand responsively within the space.
Add text-align: justify on your #buttons element
Add a #buttons:after pseudo element with 100% width to force the buttons to fill the entire sidebar
Here's a working example on JSbin.
And here's the code for your situation:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="#">1</a>
<a id="facebook" href="#">2</a>
<a id="rss" href="#">3</a>
<a id="youtube" href="#">4</a>
</div>
</div>
CSS:
#buttons {
text-align: justify;
width: 100%;
}
#buttons:after {
content: '';
display: inline-block;
width: 100%;
}
#buttons a {
display: inline-block;
height: 40px;
width: 40px;
}
This method is more fully documented here: http://www.barrelny.com/blog/text-align-justify-and-rwd/