horizontally aligning multiple divs (CSS)

alignment, css, html

Solution

You can use the incredible property box-sizing: border-box; supported by all modern browser, IE8 included! And set the width and margin on % :

.red, .blue {
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

.red {
    width:650px;
    height:1000px;
    background:red;
    padding: 1% 0 0 1%; // Space top and left of red
}

.blue {
    height:200px;
    width: 24%;
    background:blue;
    display:inline-block;
    float: left;
    margin: 0 1% 1% 0; // Space bottom and right of each blue
}

http://jsfiddle.net/Pik_at/L7qpgdkk/3/

Problem

I need to align these `div`s so that the space between "content1" and the red `div` equals the space between "content4" and the red `div`. I don't mind changing the blue-`div`'s margin but this should work for any width. I used to achieve this by making the width of the 4 blue `div`s + their left and right margins = 100% but that doesn't seem to work well in this case. I also tried adding another `div` inside the red one that contained all the blue `div`s and giving it `margin: 0 auto` but that's not working either. Code in jsfiddle (updated) PS: if i'm not clear enough, please feel free to edit my question.

Original source

Related problems