[TYPO3] csc-textpic: problem with floats

[Christopher Torgalson]

Hi again,

On 3/20/07, Tapio Markula <tapio.markula at atwebteam.com> wrote:
> Felix Natter kirjoitti:
> > Nicola Della Marina <nicola.dellamarina at webformat.com> writes:
> >
> >> Monday, March 19, 2007, 3:22:33 PM, you wrote:
> >> Hi Felix
> >>
> >>> Do I have to switch to a table layout? I'd like to avoid this because
> >>> accessibility is a requirement.
> >> If you have a two columns layout you can use the opposite columns
> >> technique.
> >> Insert "float:left" in your content div with a right margin as the
> >> width of the right column.
>
> float and DIV designing has several problems


IMO, the problem is that your understanding of how floats work is poor.


> 1) the height of the container for floated elements doesn't grow
> automatic - very bad problem
> for several rows of images because you should set the height of the
> container taking account the *maximum* height. Tables don't have this
> problem


Several simple solutions:

a) float the container.
b) insert a 'clearing' element at the bottom of the floated element
c) add some content to the floated element using the :after pseudoclass [1]

Any of these will cause the container to 'enclose' the floats. ch can
cause problems /if you don't consider these factors when designing the
markup/.


> 2) height of divs are different. If you try to set height as 100% that
> will fail in many situations. Tables don't have this problem


Wrong. Setting the height of a div to 100% never 'fails'. Percentage
heights on elements in CSS are considered to be percentages of the
element's /parent/, except in the case of the HTML element which has
no parent element in the sense that all others too. Setting 100%
height on the HTML element will set the element to the height of the
WINDOW, not of the CONTENT.

The two problems people usually encounter with 100% heights are a)
that the element does not occupy the full height of the page's
content, and b) that some parent item has no explicitly set height so
the element fails to behave as expected. Whether you can do anything
or not about (a) depends a lot on the layout in question. (b) is
easily fixed by specifying the heights of the parent elements.

Incidentally, if you don't like how height works in CSS, you've got
lots of company, but I have rarely encountered situations where the
desired layout can't be achieved without resorting to table-layouts.


> Because of serious layout problems I have sometimes changed DIV layout
> into conventional tables. Concening the latter problem DIVs are usable
> if you don't need to set background properties.


This:

"...if you don't need to set background properties"

...makes no sense. Background properties behave on divs the same as on
all other elements. If you mean because of the idiosyncracies of the
heights of floated elements, see above.


-- 
Christopher Torgalson
http://www.typo3apprentice.com/


[1] http://www.positioniseverything.net/easyclearing.html