Is there a way to center floated divs?

Forum Moderators: not2easy

Message Too Old, No Replies

Is there a way to center floated divs?

skube

9:03 pm on Mar 20, 2006 (gmt 0)

I am trying to find a solution that would enable me to center fixed width floated divs within a container.

Something similar to this post [webmasterworld.com], but with the ability to put block elements within the final nested div.

Anyone have any ideas?

doodlebee

2:46 pm on Mar 21, 2006 (gmt 0)

Can you be more specific?

Do you have an outer div that needs to be centered in the page, or dow you have inside divs that need to be centered? Are they right next to each other? Will text be around them?

Need a bit more clarification, please (and some code would be nice!) :)

skube

3:42 pm on Mar 21, 2006 (gmt 0)

Sure, ok look at the following code:

<style>
.fixed {width:700px; background-color:red}
.center {float:left; width:100px; background-color:blue}
</style>
<div class="fixed">
<div class="center">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
<div class="center">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
</div>

I'm looking to center the blue divs within the red ones, which in itself is relatively easy. However, because this code is ultimately going to be dynamic, there could be 1,2 or 3 "center" divs. So, I require a solution which allows for the divs to remain centered within the "fixed" div regardless of the number of "center" divs.

dcampbell

4:18 pm on Mar 21, 2006 (gmt 0)

You could calculate how many central divs there are going to be then set an inline style with a negative margin to centre the divs. For example:

.outer { width:700px; text-align:center; background:red; }
.inner { float:left; width:100px; background:blue; }
<div class="outer" style="margin-left:-150px;">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>

skube

6:45 pm on Mar 21, 2006 (gmt 0)

I'm not sure I understand your example. I don't see how applying a negative margin on the outer div will help center my inner ones.

doodlebee

6:59 pm on Mar 21, 2006 (gmt 0)

Okay, I think I see what you want - you want the .center class objects to be, well, centered within the .fixed area.

You do have to add another div...but no need for negative margins (although it *is* an option...but it's easier to just put in another div...) like so:


<style>
body {
text-align:center;
}
.fixed {
width:700px; 
background-color:red;
}
.outer {
display:table;
margin:0 auto;
}
.center {
float:left; 
text-align:left;
width:100px; 
background-color:blue;
}
hr {
clear:left;
visibility:hidden;}
</style><body>
<div class="fixed">
<div class="outer">
<div class="center">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
<div class="center">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
<hr />
</div>
</div> 
</body>
</div>

Hope that helps ya!

skube

9:31 pm on Mar 22, 2006 (gmt 0)

Thanks for your effort, but your example doesn't seem to work in IE.

Anyway, SuzyUK posted this post about centering floats [webmasterworld.com] last year. Interesting.