Variable Width Centring

With multiple elements

[texruska]

Hello. o/
I'm working on a design whereby the content covers 50% of the user's screen width.
Inside it are several boxes (fixed width), but there is a gap on the right hand side of them that and I can't figure out how to centre them within the "boxwrapall" wrapper.

/* Main content CSS file */

#wrap {
float:left;
width:100%;

overflow:hidden;
}
#centerwrap {
border:thin solid;
float:left;

width:50%;

position:relative;
left:50%;
}

/* Boxes */
#boxwrapall {
border:thin solid;

float:left;

position:relative;
right:50%;
}
.boxwrap {
border:thin solid;

float:left;
width:200px;
height:200px;
}

Thanks in advance for any guidance somebody might offer me. :3

[alt131]

Hi texruska, and welcome to WebmasterWorld,

I think it would be useful to see a short html snippet to confirm the structure, but using something like this:

<div id="wrap">
<div id="centerwrap">
<div id="boxwrapall">
<div class="boxwrap"></div>
<div class="boxwrap"></div>
<div class="boxwrap"></div>
</div>
</div>
</div>

Depending on browsers/versions, I've seen this achieved using a combination of display, text-align and letter-spacing adjustments:

#boxwrapall {
text-align: center;
/* letter-spacing: 50px; - adjust to suit*/
background-color:red;
}

.boxwrap {
display:inline-block;
width:200px;
height:200px;
background-color:blue;
}

[lucy24]

float:left;

position:relative;
left:50%;

What do "position" and "left" (or "right") mean in the context of a float?

If you can make sense of [w3.org...] let alone [w3.org...] (...and scroll down) you're a better woman than I ;)