Question

I am having problems centering 3 divs that are within a “container” so to say.

It should basically look something like this (forgive my crude example):

    ______________________
   |  ___    ___     ___  |
   | |___|  |___|   |___| |
   |______________________|

The problem that i am having though, is that i cant seem to figure out the css to get these 3 divs to be laid out as in my crude example.

Because the design is supposed to be elastic and expand or contract over different resolutions, thus presenting roughly the same appearance over varying resolutions.

At the moment the div’s are floated left and there is a larger gap between the last div and the container, compared to the first div. I am trying to get them all to fit snugly in the middle…

Here is the code relating to this:

.searchResult {
    padding: 1% 2% 1% 2%;
    margin: 2% 2.5%;
    width: auto;
    height: 200px;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

.bizDesc {
    margin-right: 2%;
    text-align: left;
    float: left;
    width: 35.5%;
    height: 140px;
    padding: 5px 0 0 0;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

.bizAddr {
    margin-right: 2%;
    text-align: left;
    float: left;
    width: 28%;
    height: 140px;
    padding: 5px 0 0 0;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

.bizCont {
    text-align: left;
    float: left;
    width: 28%;
    height: 140px;
    padding: 5px 0 0 0;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px / 10px;
    -o-border-radius: 10px / 10px;
    -ms-border-radius: 10px / 10px;
    -khtml-border-radius: 10px / 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px outset #003399;
    -moz-box-shadow: 5px 5px 5px #666666;
    -webkit-box-shadow: 5px 5px 5px #666666;
    -o-box-shadow: 5px 5px 5px #666666;
    -ms-box-shadow: 5px 5px 5px #666666;
    -khtml-box-shadow: 5px 5px 5px #666666;
    box-shadow: 5px 5px 5px #666666;
}

The first bit of css relates to the container, the next 3, relate to the 3 divs in order from left to right. So that my example comes out something like this:

    ______________________
   | ___    ___     ___   |
   ||___|  |___|   |___|  |
   |______________________|

If anyone would spare some wisdom and provide me with some input into this, as i am sure that the answer is quite simple, it would be greatly appreciated, thank you!!

Answer 1

This should do it:

HTML

<div id="dialogbox">
  <div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

CSS

#container{
  margin: 0 auto;
}
.box{
  width: 200px; height: 200px;
}

Whatever you do with the inner boxes is irrelevant, as long as the container has margin auto