ansaurus

Question

Align Floating Items Horizontally in CSS

Answer 1

+1 A:

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!

Andrew 2010-09-18 21:05:26

Answer 2

A:

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>

Marc Thibault 2010-09-19 00:39:48

ansaurus

tags:

views:

answers:

Align Floating Items Horizontally in CSS

related questions