homepage Welcome to WebmasterWorld Guest from 54.237.125.89
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

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

CSS Forum

    
Centering variable-width floated div(s).
Is there a way?
webapp




msg:1219063
 10:46 pm on Mar 29, 2005 (gmt 0)

Is there a simple way to center a set of floated block elements without knowing its cumulative width?

Where
CSS
div.setwidth {
width: 760px;
}
div.float{
float: left;
}

HTML
<div class="setwidth">
<div class="float">lorem</div>
<div class="float">variable width content ipsum</div>
<div class="float">lorem</div>
<div class="float">lorem</div>
</div>

and the div.floats should be centered inside div.setwidth.

Thanks in advance.

 

Harvs




msg:1219064
 1:31 am on Mar 30, 2005 (gmt 0)

webapp,

This one has had me thinking for a while as well and I haven't been able to come up with a full answer but I think I'm 90% of the way, hopefully someone can do the last 10%.

The theory should be to wrap your floated divs in another div. This way they are all contained in one div. Now because floated elements are removed from the normal flow of it's parent element it means you have to float the wrapper div in order for it to full contain the group of floated divs ie:

.wrapper{float:left;}

<div class="wrapper">
<div class="float">lorem</div>
<div class="float">variable width content ipsum</div>
<div class="float">lorem</div>
<div class="float">lorem</div>
</div>

This leaves you with one div called wrapper which contains all you floated divs nicely. Now, and this is the bit that gets me, you have to center that wrapper div in the middle of your .setwidth div. Because the wrapper div is floated you can't center it because it is removed from the normal flow of it's parent element (.setwidth). So another non-floated div is wrapped around the floated wrapper div id:

.nonfloat{
margin-left:20px;
}

<div class="nonfloat">
<div class="wrapper">
.....
</div>
</div>

Now because this new nonfloat div is not floated it doesn't fully contain the wrapper div. So this doesn't allow you to center it with margin:0 auto; because the width of nonfloat is 0. What we need now is get the nonfloat div to fully enclose the wrapper div without floating the nonfloat div. This is where I'm hopeing someone else will step in to finish up.

Well at least I hope it helped to clear up how floated elements behave in relations to there containing elements.

-Harvs-

webapp




msg:1219065
 2:31 am on Mar 30, 2005 (gmt 0)

Harvs, thanks for your help. I have tried what you've suggested, and have tried it with some more CSS to enclose the floated elements within
div.nonfloat, but since there is no width specified, margin: 0 auto; won't work to center div.nonfloat.

Here's the updated code with borders added for visual aid.

<style>
div.setwidth {
border: 1px solid red;
width: 760px;
text-align: center;
}

div.nonfloat {
border: 2px solid blue;
margin: 0 auto;
}

div.nonfloat:after {
content: "."; /* easy float clear hack (positioniseverything.net/easyclearing.html) */
display: block;
height: 0;
clear: both;
visibility: hidden;
}

* html div.nonfloat {
height: 1%; /* ie hack */
}

div.wrapper {
border: 2px dotted black;
float: left;
}

div.float {
border: 1px solid green;
float: left;
display: inline;
}
</style>

<div class="setwidth">
<div class="nonfloat">
<div class="wrapper">
<div class="float">lorem</div>
<div class="float">variable width content ipsum</div>
<div class="float">lorem</div>
<div class="float">lorem</div>
</div>
</div>
</div>

Aaarg.

webapp




msg:1219066
 12:52 am on Apr 2, 2005 (gmt 0)

So I came up with a (hacky) solution. I could have used
display: inline; for the divs but there was a reason I needed to use floats for Firefox (Phark Image Replacement). display: inline; was fine for IE so I brought that back with the hack at the end.

<style>
div.setwidth {
border: 1px solid red;
width: 760px;
text-align: center; /* ie hack */
}

div.wrap {
display: table;
margin: 0 auto;
}

div.float {
border: 1px solid green;
display: table-cell;
float: left;
}

* html div.float { /* ie hack */
display: inline;
float: none;
}

</style>

<div class="setwidth">
<div class="wrap">
<div class="float">lorem</div>
<div class="float">variable width content ipsum</div>
<div class="float">lorem</div>
<div class="float">lorem</div>
</div>
</div>


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