Welcome to WebmasterWorld Guest from 23.23.53.177

Forum Moderators: not2easy

Message Too Old, No Replies

Variable Width Centring

With multiple elements

   
7:46 pm on Sep 13, 2011 (gmt 0)



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
8:31 am on Sep 16, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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;
}
9:05 am on Sep 16, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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 ;)