I would like to center my DIVs inside a DIV but would also like them to be side by side where there is room.

At the moment they are on top of each other.

http://londonlabs.co.uk/help/squares/

I tried using float to make them go next to each on the horizonal plane but this broke the centering.

Please see attachment for further info:
http://www.webmaster-talk.com/attach...1&d=1238585531

Any ideas?

Thanks

@charset "utf-8";
#wrapper {
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    width: 90%;
    background-color:#99CC00;
    border-style:solid;
    border-width:1;
    border-color:#000000;
}
.box {
    border: 1px solid #CCCCCC;
    margin: 0 auto;
    padding: 5px;
    height: 300px;
    width: 300px;
}

for the boxes try width:50%;

Originally Posted by simster

for the boxes try width:50%;

I don't want them 50% but it didnt work anyways.

Thanks for trying.

If you want the divs to adjust when the browser window is reduced, you're going to have to use percentages for all your widths.

The only way you're going to get the boxes side by side is to float them.

Try this method:

HTML:

<div id="wrapper">
<div id="boxWrap"
<div class="box">box1</div>

<div class="box">box1</div>

<div class="box">box1</div>
</div>

</div>

CSS:

#wrapper {
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
width: 90%;
background-color:#99CC00;
border-style:solid;
border-width:1;
border-color:#000000;
position: relative;
overflow: auto; /*clears the floated divs inside it */
}
#boxWrap{
width: 90%;
margin: 0 auto;
text-align: center;
}

.box {
border: 1px solid #CCCCCC;
margin: 0 auto;
padding: 5px;
height: 300px;
width: 31%;
float: left;
}

I removed the clearing divs, you don't need them if you use overflow:auto as shown above.

Thanks.

I don't want the boxes to change size.

I just want them centered but with more than one on the horizontal plane (however many can fit which depends on the width of the browser).

It is almost there but they are not centered:
http://londonlabs.co.uk/help/squares/

Any ideas?

Ok, you will need the overflow:auto on #boxWrap too to force it to contain the floated boxes inside it. That #boxWrap container WILL then center, however, at a width of 100%, it's not going to show as centered.

You can try putting like a 2% marign on the boxes themselves, it will space them out.

May I ask what you're putting in these boxes ??? You can't float AND center a div by itself, it's contradictory. Depending on what you're doing with it, you might have better luck using a list, and that is something that you CAN center.

I've put the overflow on. Doesnt seem to have made a difference.

http://londonlabs.co.uk/help/squares/

I am going to put an image and some text in each one.

A list sounds good! How do I do that!?!

Thanks

Originally Posted by paidginny

Hello ppl,Let me introduce the best solution for ecommerce bend oregon ecommerce for smes bristol e-commerce solution cpa Have a look

You want to be banned ? Did not you read rules for posting ?

New Idea

add

text-align-center;

to the wrapper to your original code.

add

display:inline-block;

to the box to your original code.

Originally Posted by simster

New Idea

add

text-align-center;

to the wrapper to your original code.

add

display:inline-block;

to the box to your original code.

Nearly! Works in FF but not IE(7).

Thanks.

Unfortuntaely, IE has problems supporting the inline-block display property.
That's why I suggested a list.

Thanks, I will take the hint!

Know of any good list tutorials?

This might help: http://accessat.c-net.us/test/gallery.html