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

Answer 1

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.