10 replies [Last post]
stickmus
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-07-08
Posts: 17
Points: 0

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

stickmus
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-07-08
Posts: 17
Points: 0

Centering a floated div...

Yeah I tried that.

Should work in theory, but doesn't (as you can now see).

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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?

The next sentence is true. The previous sentence is false. Discuss...

stickmus
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-07-08
Posts: 17
Points: 0

Centering a floated div...

still no joy Sad

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

stickmus
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-07-08
Posts: 17
Points: 0

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)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

stickmus
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-07-08
Posts: 17
Points: 0

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

Bigdawg
Offline
Enthusiast
Last seen: 16 years 40 weeks ago
Joined: 2003-12-16
Posts: 65
Points: 0

Centering a floated div...

Nice look, you could even leave the blank one up in case anyone needed a business card template Laughing out loud

stickmus
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2004-07-08
Posts: 17
Points: 0

Centering a floated div...

Or do a php version where people could fill in their own Laughing out loud I wonder if cssbusinesscards.com is still available...