How can I get three divs with equal spacing between them using variable width?

Question

I am designing a webpage with a contact form that you can see here.

As you can see the page is designed to be variable width. I would like there to be equal spacing between the images, the form, and the edge of the content area, i.e. there would be four spaces with equal width.

At the moment I have designed it so that the images are centred in a DIV with a width of 20% and the contact form centred in a DIV with a width of 60%. This works OK, but not great, because the spacing between the contact form and the images is greater than the space between the images and the edge of the content area as the width of the browser grows. I would like to find a way of keeping all the spaces equal width.

Here is the relevant CSS:

#box {
    width: 100%;
    min-width: 800px;
}

#left {
    float: left;
    width: 20%;

}

#center {
    float: left;
    height: 100%;
    width: 60%;
}

#right {
    height: 100%;
    margin-left: 80%;
}

.dharma {
    width: 185px;
    margin: 0px auto 0;
    padding-top: 25px;
}

#contact-form {
    width: 471px;
    margin: 25px auto;
}

and here is the relevant HTML:

<div id="box">

<div id="left">
<div class="dharma"><img src="images/dharma.jpg"></div> 
</div>

<div id="center">
<div id="contact-form">
[form HTML]
</div>
</div>

<div id="right">
<div class="dharma"><img src="images/dharma.jpg"></div>
</div>

</div>

Could someone help out with this?

Thanks,

Nick

score 2 · Accepted Answer · answered Jul 11 '11 at 23:48

2

The problem you are describing is perfect for the CSS3 flexible-box layout which will work in Chrome, Safari, and Firefox. All you need is:

#box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

#left, #center, #right {
    -moz-box-flex: 1.0;
    -webkit-box-flex: 1.0;
    box-flex: 1.0;
}

Unfortunately this won't work in IE but I hope this is still helps.

answered Jul 11 '11 at 23:48

cwadding

870
11
16

Thanks. It works well in Chrome and Safari, but there is no spacing in Firefox. Should it work in Opera too, as it is not at the moment, #left, #center, #right DIVs are stacked on top of one another in the center of #box DIV – Nick Jul 12 '11 at 00:31

score 1 · Answer 2 · answered Jul 11 '11 at 23:01

Would simply setting a rule to have all of the boxes have an added margin on them not work?

Something like this:

#box {
    width: 100%;
    min-width: 800px;
}

#left, #center, #right { /* adds spacing between columns of equal size */
    margin: 0 2%;
}

#left {
    float: left;
    width: 16%;  /* reduced by 4% for margins */

}

#center {
    float: left;
    height: 100%;
    width: 56%; */ reduced by 4% for margins */
}

#right {
    height: 100%;
    margin-left: 80%;
}

How can I get three divs with equal spacing between them using variable width?

2 Answers2