floated elements inside table cell do not contribute to cell width?

Hello there again!

On my quest to remove layout tables in favor of CSS controlled elements,
I am faced with quite a problem.

A table cell that has no explicit width attribute set usually
adapts its width to accommodate the content nicely.

This is not the case when the content contains floats. I guess floats do
not contribute to the table cell width as floated elements are taken out
of the flow of the document and thus take up no space.

Please have a look at my test case here:

http://www.mobotixserver.de/~daniel/..._float_en.html

The last table on the page is contains floats. In the upper right table
cell, text covers floated elements even though the browser window is
large enough to accommodate a larger table width.

How can I have the browser respect the floats when calculating the
table width so that all elements can be placed next to each other?

Cheers
Daniel

Daniel Kabs <daniel.kabs (AT) gmx (DOT) de> wrote:

I guess floats do
not contribute to the table cell width as floated elements are taken out
of the flow of the document and thus take up no space.

A float in a table cell will stretch the cell's width and height.

--
Spartanicus

Hello!

Spartanicus wrote:

A float in a table cell will stretch the cell's width and height.

This may be true for *one* float, but what about having several floats
in the cell? At least the floats in my example (last table on the page)

http://www.mobotixserver.de/~daniel/..._float_en.html

do not stretch the cell's width.

How do I get the floats arranged next to each other so that the cell's
width is stretched and text does not overlap the floated buttons,
without setting fixed sizes?

Thanks for your help,

Cheers
Daniel

Daniel Kabs <daniel.kabs (AT) gmx (DOT) de> wrote:

A float in a table cell will stretch the cell's width and height.

This may be true for *one* float, but what about having several floats
in the cell?

Same.

At least the floats in my example (last table on the page)

http://www.mobotixserver.de/~daniel/..._float_en.html

The quality of the help available here increases significantly if you
allow us to see what it is that you are actually trying to do (minimised
to only the relevant bit), instead of presenting bogus "some text"
content.

--
Spartanicus

Hello Spartanicus,

thanks for answering.

Spartanicus wrote:

This may be true for *one* float, but what about having several floats
in the cell?

Same.

Granted, the cell dimensions will increase to incorporate all floated
elements.

Problem is, the arrangement of several floats inside a cell is not
completely controllable, e.g. you can not have all floats on one line
although the browser window is big enough. At least this is my finding
after experimenting with floats.

At least the floats in my example (last table on the page)

http://www.mobotixserver.de/~daniel/..._float_en.html

The quality of the help available here increases significantly if you
allow us to see what it is that you are actually trying to do (minimised
to only the relevant bit), instead of presenting bogus "some text"
content.

You are insinuating that my example is a bloated mess, a tag soup that
you deservedly declined to decrypt. I am sorry if you got that
impression. Believe me, I put several hours of work into that page to do
exactly what you are asking for: describe the problem using reduced test
cases. Therefore I used "bogus text". I think that's typical for test
cases and examples. Of course, I could have used the "lorem ipsum" dummy
text instead :-)

I think, you did not read through my page. The page describes *what* I
am trying to do, then gives some *working examples* (using tables) and
then tries to give some solutions (using CSS), which are the best I
could think of.

What more information do you need? I am happy if I can improve the page
to describe the problem more clearly.

Cheers
Daniel

Daniel Kabs <news092006 (AT) kabsi (DOT) de> wrote:

This may be true for *one* float, but what about having several floats
in the cell?

Same.

Granted, the cell dimensions will increase to incorporate all floated
elements.

Problem is, the arrangement of several floats inside a cell is not
completely controllable, e.g. you can not have all floats on one line
although the browser window is big enough. At least this is my finding
after experimenting with floats.

You probably have a misconception about floats. Floating is not a
correct method to align elements or to create a "layout". Sadly floating
is often used for these purposes, but it's a hack which often causes
nasty problems, and when used for such inappropriate purposes they often
are a pain to work with.

At least the floats in my example (last table on the page)

http://www.mobotixserver.de/~daniel/..._float_en.html

The quality of the help available here increases significantly if you
allow us to see what it is that you are actually trying to do (minimised
to only the relevant bit), instead of presenting bogus "some text"
content.

You are insinuating that my example is a bloated mess, a tag soup that
you deservedly declined to decrypt.

I implied no such thing.

I am sorry if you got that
impression. Believe me, I put several hours of work into that page to do
exactly what you are asking for: describe the problem using reduced test
cases. Therefore I used "bogus text". I think that's typical for test
cases and examples. Of course, I could have used the "lorem ipsum" dummy
text instead :-)

I think, you did not read through my page. The page describes *what* I
am trying to do, then gives some *working examples* (using tables) and
then tries to give some solutions (using CSS), which are the best I
could think of.

What more information do you need? I am happy if I can improve the page
to describe the problem more clearly.

It helps considerably if we are allowed to see the problem, not
someone's idea of the solution since that prevents us from checking if
the best solution was chosen.

Your example doesn't show us anything about what you are actually trying
to do. All it demonstrates is that you are trying to emulate table
properties. This can be done using CSS, but it is rarely a good idea to
do so. Table layouts have a bad reputation for the problems they cause,
so what is the point of emulating all those problems with CSS? If you
want to move away from table layouts then you are going to have to adapt
a new way of thinking.

Now how are we supposed to suggest a good way forward if as in your case
all we can learn from your demo is that you want to emulate tables?

--
Spartanicus

Good Morning!

Spartanicus wrote:

You probably have a misconception about floats. Floating is not a
correct method to align elements or to create a "layout". Sadly floating
is often used for these purposes, but it's a hack which often causes
nasty problems, and when used for such inappropriate purposes they often
are a pain to work with.

Understood. Now what is the correct method to align block elements on
one line, say one element to the left, one to the right? We had this
discussion a few days ago over in German group dciwa.misc. There, people
suggested either to float the elements or to position the elements. The
latter bears the drawback that the elements had to be given sizes to
prevent overlapping. What is your suggestion?

It helps considerably if we are allowed to see the problem, not
someone's idea of the solution since that prevents us from checking if
the best solution was chosen.

Maybe you are too skilled to see the problem. :-) On the other hand, if
I hadn't given any solution by myself, someone might have complained
that I am lazy as I did not even try to solve the problem on my own.

Your example doesn't show us anything about what you are actually trying
to do.

I can not concur. The examples on the page ("Original using nested
layout table") present the layout (arrangement of text and buttons) I
want to achieve.

Granted, I implemented the examples using tables. Why did I use tables?
Because I do not know of any other way to achieve the layout currently.
I could have used screenshots instead but they lack the dynamic behaviour.

All it demonstrates is that you are trying to emulate table
properties.

I am trying to emulate a *layout* through the use of CSS. The fact that
(on the page) the desired layout was presented using a table should not
mislead you. The nested table is only a means of presenting the desired
layout. As I said, I could've used screenshots instead. But that's not a
good idea, I thought.


Cheers
Daniel

Daniel Kabs <news092006 (AT) kabsi (DOT) de> wrote:

Your example doesn't show us anything about what you are actually trying
to do.

I can not concur.

I am not wasting my time on someone who isn't willing to let me see what
he is actually trying to do, bye.

--
Spartanicus

Hi again!

Spartanicus wrote:

I am not wasting my time on someone who isn't willing to let me see what
he is actually trying to do, bye.

I described the problem in several postings and crafted a web page with
examples describing the layout I want to achieve. And you call me
"unwilling"?

What more do you need?
What else do you want to see?
What did you understand so far?

Cheers
Daniel

Hi,

I will try my best to help you get some help.

Daniel Kabs a écrit :

Spartanicus wrote:
It helps considerably if we are allowed to see the problem, not
someone's idea of the solution since that prevents us from checking
if the best solution was chosen.
[...]
Your example doesn't show us anything about what you are actually
trying to do.

I can not concur. The examples on the page [...] present the layout
[...] I want to achieve.

Granted, but we need to know a bit of the "big picture" to give a
meaningful and useful answer. Your question is very accurate, too
narrow indeed, something along the line of "how can I get a row of
buttons in the upper right cell of a table ?".

If you intend to use your 4-cell table as a page layout, use one page
per attempt; put a (random) picture where a picture (i.e., a logo) will
eventually be, put short texts where there will be a menu, include a
full lorem ipsum paragraph where you plan to put your articles. And
then we can point you to a tested-and-proven two-column CSS layout on
the web. ;-) Or try and fix any additional problem you may encounter.

Best of luck,
-- Daniel