I've been trying to get this to work for a while, but with no results.
http://www.mistercut.com/test/ferrara/index.html
http://www.mistercut.com/test/ferrara/ferrara.css
What it does is great: the div only expands when there's enough room for the next float.
But ideally I would like it centered on the page too.
Any suggestions?
I've tried putting it in a container div, but wasn't sure what styles might make it work.
Centering a floated div...
You were along the right lines with the container; Generaly a text-align:center on the body for IE5 and margin:auto on the container for all well behaved browsers and a text-align:left to re-position text for IE5 should centre things.
Hugo.
Centering a floated div...
Yeah I tried that.
Should work in theory, but doesn't (as you can now see).
Centering a floated div...
Try removing this from your body CSS:
width:auto; margin:0 auto;
It maybe messing with the container div's auto margin?
Centering a floated div...
still no joy
Centering a floated div...
Hi there,
You still need to set text align center in the body and text align left in the container to re-position for IE5 .
the reason it is not centering is the float left on the #maindiv remove it and then, unless you want the page full screen width minus the padding 15px you've set on the body, I would give the #container a % width something like 80% then it should center up. You will need to play around with the other floats to get them equalised.
Edit: just seen that you have text aligned.
Hugo.
Centering a floated div...
Floating the #maindiv is the clever bit of trickery that makes it all snap to the correct size when the page wraps (which it does correctly in ie5+ and firefox woohoo). Have played around with lots of things to try and get it to work, I guess I'll give up (for now)
Centering a floated div...
Stickmus, see your point about the float,
I've got the whole thing centered and collapsing to a single column
I put the float back in on #maindiv, with width:80% margin:auto on the container and the position:relative and width:auto that you have put in to your revised CSS; it seems to work for me in Firefox and IE6 .
Sorry if i'm still missing some salient point here or maybe I'm just going mad the only difference I can see in the CSS is you have margin:0 auto in the container; so I am at a loss as to why there is a difference!! :?
Need someone with a keener mind than mine on this one.
Hugo.
Centering a floated div...
Okay, I've simplified the code/css down to bare minimum, hope that helps...
http://www.mistercut.com/test/floatbox.html
Hugo: I couldn't quite follow what you'd done. could you post the code?
Thanks
Centering a floated div...
Nice look, you could even leave the blank one up in case anyone needed a business card template
Centering a floated div...
Or do a php version where people could fill in their own I wonder if cssbusinesscards.com is still available...