Centering a div between left and right float

[holmescreek]

Ok, imagine three thumbnail images laid out horizontally. The first should float left, the third float right, and the middle thumbnail float between the two.

On a fixed width site, I can easily set up a class called .center_thumb that floats left, but has a left margin of x number of pixels. This works great, again, for fixed width sites.

However on an elastic layout, the middle thumbnail won't stay centered, simply because the margin is explicitly set (above in pixels).

In the .center_thumb class, I tried to set the left and right margins to auto, but it just floats left, if I take the float out, of course it goes back into the natural flow of the document.

Here is some random code to get you an idea of what I've been doing, any suggestions would be helpful.

.thumbnail {

  width:200px;
  padding:20px;
  float:left; 
}

.center_thumb {
 
  float:left; /* if I take this out, goes back into natural flow */

  margin-left:50px;  /* this works ok for fixed sites */
  margin: 0px auto 0px auto; /* tried changing to auto, and commenting out the margin-left line (above), but doesn't center */

}

.right_thumb {
  float:right;
}

<div class="row_wrapper">
  <div class="thumbnail">Left Column.</div>
  <div class="thumbnail center_thumb">Center Column</div>
  <div class="thumbnail right_thumb">Right Column</div>
</div>

I just typed up the above as a slimmed down example --- figure the reader would get the idea.

Thanks in advance!

hc

[Enzyme Online]

you could have a container that takes up the width between the left and right thumbnails or whatever. do that by giving it a width with percentage and and giving the other two divs percentages so all add up to 100%. then have the thumbnail inside the middle container centered

.center{
margin: 0 auto 0 auto;
}

this was the other thing I was thinking about:
give all three containers a certain width with percentages, leaving some left over.
with the remaining percentage, divide that by two (say this value = x) and have the middle column have margin: 0 x% 0 x%.

let me know if either of these solutions help you out
I don't know why you want to do this in the first place...

[holmescreek]

have the middle column have margin: 0 x% 0 x%.

let me know if either of these solutions help you out
I don't know why you want to do this in the first place...[/quote]

I think I tried percentages, but I'll give it another shot. Well, my goal is to create a page of thumbnails without using tables -- in addition, the php to generate the <div> code is less bloated than generating columns and rows etc.

If the percentages work, on a left margin, then I could just shoot out the thumbnails wrapping them in a single div, this way, I could code out from my database : <div class="thumbnail>item1</div><div class="thumbnail">item 2</div>

If the browser resizes, then they would wrap around but still maintain constant margin widths between the items.

I'm thinking in terms of a thumbnail gallery, without tables.

thanks for the feedback.

[dreado]

I have a very similar situation. I would like a div to be central in whatever space is available, depending on the browser width. Thought this could be done with auto margins, but that only works in IE(7). In FireFox the auto margins seem to make the div clear.

I can't see how this could be done with percentages. Anyone know how to replicate the IE behaviour in other browsers?

[dreado]

Hi all4nerds
Neither of those seem to do what I would like; the nav div just stays stationary, when it should be moving when you adjust the width.

[dreado]

Thanks
I had just come up with pretty much the same same solution of putting another div around the nav one, but I had put a right margin on it, instead of overflow hidden. Your version works better in IE6 though, as mine was causing the nav div to drop down if the window was too small.