CSS newbie: horizontally aligned divs keep breaking my layout - css

Question

I'm making my first site and I'm having an issue with some buttons I've created. They are three divs within another div, and horizontally aligned. Here's the html:
<div class="buttons">
<div id="next-event"></div>
<div id="blog"></div>
<div id="about"></div>
</div>
Here's the CSS:
.buttons {
height: 200px;
}
#next-event, #about, #blog {
width: 155px;
padding-bottom: 30px;
}
#blog {
margin-right: 125px;
float: right;
height: 155px;
background: url(assets/blog.png) no-repeat;
}
#blog:hover {
background-position: -155px 0px;
}
#next-event {
margin-left: 125px;
float: left;
height: 155px;
background: url(assets/next-event.png) no-repeat;
}
#next-event:hover {
background-position: -155px 0px;
}
#about {
display: inline-block;
width: 95px;
height: 155px;
background: url(assets/about.png) no-repeat;
}
#about:hover {
background-position: -155px 0px;
}
I'm having problems when I resize the window in and out, as you can see at the site: http://madeitseries.com/
For scrolling in, how to I set it so the containing div for the yellow buttons gets longer only when the window is below a certain width?
And for scrolling out, how do I set it so the yellow buttons distribution only spreads to a certain point?
Thanks so much!

Answer 1

So to position the buttons, you could use a grid: http://youtu.be/0IrWRuEyXYA
Or you could use a media query to change the styles once the screen gets to a certain size so they don't overlap each other
Edit: Here's a link to the fiddle with the media query and it working properly as I imagine you want it to. I've removed the floats and margins, set the .buttons div to be the width of the buttons, set .buttons height to auto, and centred them using margin: 0 auto; http://jsfiddle.net/W6B2L/
#media screen and (max-width: 770px) {
#about {
display: block;
}
.buttons {
height: auto;
width: 185px;
margin: 0 auto;
}
#blog {
margin-right: 0px;
float: none;
}
#next-event {
margin-left: 0px;
float: none;
}
}

Answer 2

set the height of the buttons div to auto
if you want the buttons to resize according to the width of the screen, give them each a width of 33.33%.

Answer 3

Why can't you use css media query like below,
#media (max-width: 740px)
{
.buttons div
{
height: 100px !important;
width: 100px !important;
background-size: 200% !important;
padding: 0 !important;
}
}
Just copy this code into your css file.. when your webpage shrinks(resize) below 740px, then your images automatically resized as per the below code.. Like that you can customize your own codes for your desired screen resolution...
Note: Just use this code in your web page.. It might works.. And you need to customize for the hover state only..