468,107 Members | 1,317 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,107 developers. It's quick & easy.

floating in centered elements

The buy behind the csszengarden has a tutorial on how to center
absolutely positioned elements. Here's the last example:

http://www.mezzoblue.com/tests/centered-css/ex5.html

I've tried replacing the text with three divs of different colors
floated next to one another to no avail:

http://www.frostjedi.com/terra/dev/test.html

As can be seen, the vanilla colored box is duplicated (atleast in IE;
in firefox, it appears as a line). Also, when the content inside the
div that produces the vanilla colored box is floated left, the fact
that margin-left/right are set to auto seems to be ignored.

So any ideas as to how I can float content within divs that are both
centered and absolutely positioned?

Jul 21 '05 #1
4 1565
in comp.infosystems.www.authoring.stylesheets, yawnmoth wrote:
The buy behind the csszengarden has a tutorial on how to center
absolutely positioned elements. Here's the last example:

http://www.mezzoblue.com/tests/centered-css/ex5.html
Doesn't seem to work on Opera 8, don't know why.
I've tried replacing the text with three divs of different colors
floated next to one another to no avail:

http://www.frostjedi.com/terra/dev/test.html

As can be seen, the vanilla colored box is duplicated (atleast in IE;
in firefox, it appears as a line).
Unfortunately I have no idea what you mean with vanilla color, but I
don't see anything.
Also, when the content inside the
div that produces the vanilla colored box is floated left, the fact
that margin-left/right are set to auto seems to be ignored.

So any ideas as to how I can float content within divs that are both
centered and absolutely positioned?


Set positioned element (min-)width and (min-)height equal to float size.
Set it to display:table. Don't use float when you don't need it.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #2

Lauri Raittila wrote:
in comp.infosystems.www.authoring.stylesheets, yawnmoth wrote:
<snip>
As can be seen, the vanilla colored box is duplicated (atleast in IE; in firefox, it appears as a line).
Unfortunately I have no idea what you mean with vanilla color, but I
don't see anything.


in opera, it appeared as a black line, but regardless, that problem has
been fixed.
Also, when the content inside the
div that produces the vanilla colored box is floated left, the fact
that margin-left/right are set to auto seems to be ignored.

So any ideas as to how I can float content within divs that are both centered and absolutely positioned?


Set positioned element (min-)width and (min-)height equal to float

size. Set it to display:table. Don't use float when you don't need it.


tried that, and it didn't work :(:

http://www.frostjedi.com/terra/dev/test2.html

although that said, i don't think the problem relates to floats,
anymore, so much as it does the fact that i'm simply using divs within
another div that's been both centered and absolutely positioned.

Jul 21 '05 #3
in comp.infosystems.www.authoring.stylesheets, yawnmoth wrote:
tried that, and it didn't work :(:

http://www.frostjedi.com/terra/dev/test2.html

although that said, i don't think the problem relates to floats,
anymore, so much as it does the fact that i'm simply using divs within
another div that's been both centered and absolutely positioned.


Maybe, if you would describe what you wanted to see? It would be easier
to answer.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #4
Lauri Raittila wrote:
in comp.infosystems.www.authoring.stylesheets, yawnmoth wrote:
tried that, and it didn't work :(:

http://www.frostjedi.com/terra/dev/test2.html

although that said, i don't think the problem relates to floats,
anymore, so much as it does the fact that i'm simply using divs within another div that's been both centered and absolutely positioned.
Maybe, if you would describe what you wanted to see? It would be

easier to answer.


i photoshopped an example of what i'd like:

http://www.frostjedi.com/terra/dev/test.jpg

Jul 21 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by =?iso-8859-1?B?QW5kcukgSORuc2Vs?= | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.