html - CSS block float left margin to full parent width -


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 make automatically?, everytime main width changes, have change children margins , width, or how make more efficiently?, if add border blocks while hovering them, if on max margin , width, border add more width, , here begins problems

just change margin-left: 100px auto:

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

demo: http://jsfiddle.net/ahzxx/


Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -