homepage Welcome to WebmasterWorld Guest from 54.211.50.5
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved