CODEWITHSUNDEEP
csshtmlcss-floatcenter
alt
alt

Reputation: 13947

Float a bunch of divs CENTERED while retaining dynamic width and height

I've got a large div. It contains a bunch of thumbnails. I'd like the thumbnails within the div to be centered inside the div, and the div to be centered on the page. But I'd also like the width of the div to be dynamic so you can see all the thumbnails on every resolution, centered. How could I achieve this?

here's what I have so far:

<div id="container">
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
</div>

I've tried centering it with this css: The problem is I need an alternative to float:left that works to center so they all float around each other. What I currently have just floats them left so on the wrong browser width, they're not centered.

#container{margin:auto;width:80%}
.thumb{padding:60px;float:left}

Any ideas on how to do something like float:center?

Upvotes: 1

Views: 1260

Answers (2)

Michael Irigoyen
Michael Irigoyen

Reputation: 22957

Firstly, you cannot give the same ID to all the children <div>; That is invalid HTML.

I'd do something like this:

#container{margin:0 auto;width:80%;text-align:center}
#container div{padding:60px;display:inline}

<div id="container">
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
    <div><img /></div>
</div>

Alternatively, you could just change all the <div>s to <span>s and remove the display:inline CSS directive. You could also completely remove the <div> or <span> idea and just apply the padding directly to the img tag.

EDIT: Seeing comments posted on another answer, it looks like my answer above still won't exactly help you. Is this the behavior you're trying to accomplish? http://jsfiddle.net/9KqQN/1

#container{margin:0 auto;width:80%;text-align:center}
#container span{display:inline-block;text-align:left}

<div id="container">
    <span>
        <img />
        <img />
        <img />
        <br />
        <img />
    </span>
</div>

Upvotes: 3

Marc B
Marc B

Reputation: 360882

Use display: inline-block on the thumb divs. This lets you treat them like any other piece of text, but retains their inherent "boxiness" for sizing:

#container {margin: auto; width: 80%; text-align: center; }
.thumb { height: 100px; width: 100px; padding: 60px; display-inline-block; }

Upvotes: 1

Related Questions