CODEWITHSUNDEEP
cssspacingvariable-width
Nick
Nick

Reputation: 4462

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

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

Upvotes: 1

Views: 2816

Answers (2)

cwadding
cwadding

Reputation: 870

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.

Upvotes: 2

Nightfirecat
Nightfirecat

Reputation: 11610

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%;
}

Upvotes: 1

Related Questions