Align Floating Items Horizontally in CSS

Question

I have an unlimited/unbound number of DIV tags that are floating to the left.
As the browser is resized, the DIV tags wrap to the next line.
Because the DIV tags wrap based on whether or not they have enough spacing on the right side of the screen, when they do wrap, it leaves a large space on the right side of the screen.
So if the DIV was 32x32, a 32x32 space would be left on the right side of the screen.

I would like the parent DIV to center the contents in this situation, so if there was, for example, a 32px space on the right side as the result of the wrap, it would adjust the child contents to have 16px on the left side and 16px on the right side.

For example, without the contents being centered, the screen would look like the following:

[DIV] [DIV] [DIV] [DIV].. GAP .|

[DIV] <-Wrapped.................|

I would like to put these DIVs inside of a parent so that when the DIV was wrapped, the contents would look like the following:

.....[DIV] [DIV] [DIV] [DIV].....| <- Centered, but still floating left.

.....[DIV]..............................| <- Parent is centered, but DIV is still floating left.

The wrapping is still allowed, but as the browser shrinks or grows horizontally, the parent DIV automatically adjusts the content of the child DIVs to center.

How can I accomplish this?

Answer 1

As you have described it you cannot do it. You could possible have all the divs set to display:inline-block instead of float left, and then put them all in a big wrapper div with text-align center. That would make the div that jumps down a line centered instead of aligned left, though.

Alternatively, you could set a wrapper div that had its width set as a percentage of the page, and also a minimum pixel width, then was set to margin 0 auto. Something like:

div.wrapper {width:90%; min-width:800px; margin: 0 auto;}

I suspect that would do what you're thinking, but I haven't tested it. Hope this sparks some ideas!

Answer 2

This may not be exactly what you asked for, but I think it meets the aesthetic requirement:

<!DOCTYPE HTML>
<html lang="en">
<head>
<style>
    #wrapper {
        margin: 0 auto;
        border: 1px solid gray;
        text-align: justify;
    }

    .me {
        display: inline-block;
        padding: 1em;
        border: 1px solid blue;
    }
</style>
</head>
<body>
    <div id = "wrapper">
            <div class="me"><p>One line of stuff in a div.</p></div>
            <div class="me"><p>One line of stuff in a div.</p></div>
            <div class="me"><p>One line of stuff in a div.</p></div>
            <div class="me"><p>One line of stuff in a div.</p>
                <p>Or two.</p></div>
            <div class="me"><p>One line of stuff in a div.</p></div>
            <div class="me"><p>One line of stuff in a div.</p></div>
            <div class="me"><p>One line of stuff in a div.</p></div>
    </div>
</body>
</html>

Align Floating Items Horizontally in CSS

Question

2 answers

solution1
1 ACCPTED 2010-09-18 21:05:26

solution2
0 2010-09-19 00:39:48

Align Floating Items Horizontally in CSS

Question

2 answers

solution1 1 ACCPTED 2010-09-18 21:05:26

solution2 0 2010-09-19 00:39:48

solution1
1 ACCPTED 2010-09-18 21:05:26

solution2
0 2010-09-19 00:39:48