| Variable Width Centring
With multiple elements |
texruska
msg:4362080 | 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
|
alt131
msg:4363267 | 8:31 am on Sep 16, 2011 (gmt 0) |
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
msg:4363286 | 9:05 am on Sep 16, 2011 (gmt 0) |
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 ;)
|
|
|
