CSS block float left margin to full parent width

Question

html:

<div class="main_block">
    <div class="block">
       <p>some title</p>
       <img src="some_image.png" />
    </div>
    <div class="block">
       <p>some title</p>
       <img src="some_image.png" />
    </div>

    <div class="block">
       <p>some title</p>
       <img src="some_image.png" />
    </div>
</div>

css:

div.main_block
{
    width: 600px;
}

div.main_block div.block
{
    width: 100px;
    margin-left: 100px;
}
div.main_block div.block:first-child
{
    margin-left: 0;
}

div.main_block div.block:hover
{
    border: 1px solid orange;
}
div.main_block div.active
{
    border: 1px solid orange;
}

is there something to make it automatically?, thus everytime the main width changes, I have to change the children margins and width, or how to make it more efficiently?, also if I add the border to the blocks while hovering them, if it was on a max margin and width, the border will add more width, and here begins the problems

Answer 1

Just change the margin-left: 100px to be auto:

div.main_block div.block
{
    width: 100px;
    margin-left: auto;
}

DEMO: http://jsfiddle.net/aHZXx/

Answer 2

you can use % instead of px. for exemple :

div.main_block div.block
{

width: 10%;



   margin-left: 10%;
}