homepage Welcome to WebmasterWorld Guest from 54.237.99.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Centering floats?
Is that a contradiction in terms?
photon

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 598 posted 9:49 pm on Feb 7, 2003 (gmt 0)

I have a set of "address cards" that are set up as floats, all uniformly sized, so that they'll line up nicely in rows no matter the width of the screen. What I'd like to do is have the "cards" centered on the page (or within the containing div) regardless of whether there are one, two, three, or n across. Right now they tend toward the right side of the page since, of course, they're floated right.

Is it possible to center a group of block elements while still having a fluid number of them in a single row?

If the "card" concept isn't clear, think of them as thumbnails

 

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 598 posted 10:51 pm on Feb 7, 2003 (gmt 0)

Just wrap an extra div around them, setting its margin to auto ..

Or, if the div is 400px wide (for example), set left to 50% and leftmargin to -200px (negative the half width). That would center the box on the page ..

photon

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 598 posted 6:27 pm on Feb 10, 2003 (gmt 0)

DrDoc-

I'll play with that idea some when I next get the chance. But I'm wondering how exactly that would work. Wouldn't I have to use a div with no declared width? That way the div would expand and contract to exactly fit the floats. Otherwise, with a declared width, the floats would still be off to one side. And, if so, does the margin:auto cause problems for IE?

So I'm thinking something like this (greatly reduced):

.fixedwidth {width:80%;}
.floatcontainer {margin:auto;}
.floater {display:block; float:right; width:20em;}
...
<div class="fixedwidth">
<div class="floatcontainer">
<span class="floater">blah blah blah</span>
<span class="floater">blah blah blah</span>
<span class="floater">blah blah blah</span>
</div>
</div>

Is that along the lines you were thinking?

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