Using HTML5 and CSS3 How can I keep two elements inline in a responsive container whilst maintaining the same margins?

Question

I need two boxes horizontally aligned which keep their exact margin sizes on resize.

If user increases size (width) of window, the boxes should increase in width, but the margins around them should remain the same always.

How can I achieve this?

Here's a DEMO example using CSS width: 49%; percentages which I can't get to work (for obvious reasons) 1% 100 pixels is less than 1% of 200 pixels.

The margin (gap) on the far right increases in width the wider the window is resized. The gap inbetween the buttons, and on the far left and right should maintain the same size.

Thanks

Answer 1

There is a neat solution using the CSS3's calc() and the browser support is remarkably good.

See this fiddle: http://jsfiddle.net/P5aGU/7/. I changed the following styles:

.more-details-button {
    background-color: #46C272;
    border-radius: 3px;
    display: inline-block;
    height: 50px;
    margin: 10px 10px 10px 10px;
    vertical-align: top;
    width: calc(50% - 15px);
}
.product-user-rating {
    background-color: red;
    display: inline-block;
    font-size: 16px;
    height: 50px;
    margin: 10px 0px 10px 10px;
    width: calc(50% - 15px);
}

You also need to change the HTML slightly:

<div class='product-actions center-align'>
    <div class='product-user-rating'>
        <p style='display:inline-block; font-size:10px; text-align:left;'>

        </p>
    </div><div class='more-details-button'>
        <p></p>
        <div class='icon more-details-icon'></div>
    </div>
</div>

Please note how the <div class="more-details-button"> has to start immediately after the <div class="product-user-rating">. This is because you want them to have display: inline-block which will display all whitespace characters between two elements in the HTML.

Answer 2

Try add delimiter between buttons, http://jsfiddle.net/Ed3WR/3/

.more-details-button {
    background-color: #46C272;
    border-radius: 3px;
    -moz-box-shadow: 0 0 9px -5px #000000;
    -webkit-box-shadow: 0 0 9px -5px #000000;
    box-shadow: 0 0 9px -5px #000000;
    display: inline-block;
    height: 50px;
    margin: 10px 0;
    vertical-align: top;
    min-width: 49%;
    max-width: 50%;
}

.product-user-rating {
    background-color: red;
    -moz-box-shadow: 0 0 9px -6px #A2A2A2;
    -webkit-box-shadow: 0 0 9px -6px #A2A2A2;
    box-shadow: 0 0 9px -6px #A2A2A2;
    display: inline-block;
    font-size: 16px;
    height: 50px;
    margin: 10px 0;
    min-width: 49%;
    max-width: 50%;

}

.button-delimiter {
    display: inline-block;
    height: 10px;
    width: 5px;
}

Answer 3

I made a similair thing about half a year ago which you can study, it has fixed margins on both divs

<div class='wrapper'>
    <div class='left-wrapper'>
        <div class='left'>
        </div>
    </div>
    <div class='right-wrapper'>
        <div class='right'>
        </div>
    </div>
</div>

CSS:

.wrapper{
    width:auto;
    margin-left:10px;
    margin-right:10px;
}
.left-wrapper{
    float:left;
    width:50%;
    height:50px;
}
.left{
    background-color:red;    
    height:50px;
    height:100%;
    margin-right:5px;
}
.right-wrapper{
    float:right;
    width:50%;
    height:50px;
}
.right{
    background-color:green;
    width:100%;
    height:50px;
    margin-left:5px;
}

http://jsfiddle.net/P5aGU/9/