CSS liquid layout - can't achieve correct sizing

[Guest]

Hi,

I've learnt the best way is to use an example so look at the following:

http://62.149.36.16/~generic9/plain-exmaple.htm

and then look at the following:
http://62.149.36.16/~generic9/plain-exmaple2.htm

Now as you can see the main text has gone past the bottom of the page.

what I want is a situation where if I wrie more text it just goes down. Now
at first I thoguht it was as simple as chaning the class
"MainCentreSection"

So that the height is auto or 100%.

But it did not work in Firefox (It seemed to work OK in IE). In firefox it
seemed to shrink the white section down so its height was very small. See
example:

http://62.149.36.16/~generic9/plain-exmaple3.htm
(view in firefox and in IE to compare).


Although IE displays the above closer to how I expected it, it's still not
perfect although you cannot see it in the example because I do not have a
background image for the right hand section, but bascially I also will want
my background image on the right to repeat down to the bottom but it does
not when I put make the change that I made in example3. For now this is not
as essential as sorting the previous query may sort this out.

I hope this question makes sense. I've been learning a lot about CSS and
this ng has helped. Still a way to go but getting better.

Thanks

 

[Kevin Scholl]

Hi,

I've learnt the best way is to use an example so look at the following:

http://62.149.36.16/~generic9/plain-exmaple.htm

and then look at the following:http://62.149.36.16/~generic9/plain-exmaple2.htm

Now as you can see the main text has gone past the bottom of the page.

what I want is a situation where if I wrie more text it just goes down. Now
at first I thoguht it was as simple as chaning the class
"MainCentreSection"

So that the height is auto or 100%.

But it did not work in Firefox (It seemed to work OK in IE). In firefox it
seemed to shrink the white section down so its height was very small. See
example:

http://62.149.36.16/~generic9/plain-exmaple3.htm
(view in firefox and in IE to compare).

Although IE displays the above closer to how I expected it, it's still not
perfect although you cannot see it in the example because I do not have a
background image for the right hand section, but bascially I also will want
my background image on the right to repeat down to the bottom but it does
not when I put make the change that I made in example3. For now this is not
as essential as sorting the previous query may sort this out.

I hope this question makes sense. I've been learning a lot about CSS and
this ng has helped. Still a way to go but getting better.

Thanks

What you're looking for sounds like a "sticky footer". See:

http://www.themaninblue.com/writing/perspective/2005/08/29/

for a possible solution. FWIW, you might reference this question in a
CSS newsgroup as well, as I know it's been addressed many times.

 

[Ben C]

what I want is a situation where if I wrie more text it just goes down. Now
at first I thoguht it was as simple as chaning the class
"MainCentreSection"

So that the height is auto or 100%.

You want auto. Rule of thumb: you almost never want to set height to
anything except auto.

But it did not work in Firefox (It seemed to work OK in IE). In firefox it
seemed to shrink the white section down so its height was very small. See
example:

http://62.149.36.16/~generic9/plain-exmaple3.htm
(view in firefox and in IE to compare).

This is because most of your content is in floats. Boxes don't
automatically grow in height to fit floats in-- instead the float
overflows and text in the following block flows around it.

Whatever IE's doing it's wrong.

To get the float contained in Firefox, you can add overflow: hidden to
the styles for .mainContent, which will cause descendent floats to be
contained after all for some subtle and interesting reasons to which IE
is probably completely oblivious.

Alternatively you may be able to put another empty <div></div> after the
floats set to "clear: both".

 

[Guest]

To get the float contained in Firefox, you can add overflow: hidden to
the styles for .mainContent, which will cause descendent floats to be
contained after all for some subtle and interesting reasons to which IE
is probably completely oblivious.

Would you be kind enough to explain this statement in a little more details.
Overflow is no to me but got a little bit lost half way through this
partiular paragraph.

Thanks

 

[Guest]

To get the float contained in Firefox, you can add overflow: hidden to
the styles for .mainContent, which will cause descendent floats to be
contained after all for some subtle and interesting reasons to which IE
is probably completely oblivious.

Hmm I kind have this working without really understanding it. Undersanding
growing but not there fully yet.
However, alhtouhg this works, getting the div that is to the right of the
left section I can now get to expand downwards to match the text content, I
can't make the right hand section fill down to match the same size as the
left section (I hope that makes sense).

So for example, lets say I put a repeating vertical image in the right hand
section div, using the suggested technique above stops the right hand
section repeating the image down to the bottom where the left hand section
goes down to.

Hopefully what I'm saying makes sense.

Thanks for input

 

[Ben C]

Would you be kind enough to explain this statement in a little more details.
Overflow is no to me but got a little bit lost half way through this
partiular paragraph.

It is a bit of a weird side-effect of overflow: hidden.

See

http://groups.google.co.uk/group/comp.infosystems.www.authoring.stylesheets/msg/22eadc1c6622d5c5

and

http://groups.google.co.uk/group/alt.html/msg/eeac004d67abb772

dorayme has a webpage about containment of descendent floats with some
examples but I can't find the url.

 

[Ben C]

Hmm I kind have this working without really understanding it. Undersanding
growing but not there fully yet.
However, alhtouhg this works, getting the div that is to the right of the
left section I can now get to expand downwards to match the text content, I
can't make the right hand section fill down to match the same size as the
left section (I hope that makes sense).

Yes. You can't really do that automatically with floats.

So for example, lets say I put a repeating vertical image in the right hand
section div, using the suggested technique above stops the right hand
section repeating the image down to the bottom where the left hand section
goes down to.

Hopefully what I'm saying makes sense.

The height of a float depends only on the stuff inside that float (and
whatever you may have set for height, min-height, or max-height). You
can't take two floats that are side-by-side and make them both the be
the height that the taller one's content requires. That's what tables
are for. Tables are the only elements that "link" adjacent column
heights together in that way.

But, there are some clever tricks. If you're setting a width on that
right hand float explicitly, you can just give it a transparent
background (the default), and then put its background image on its
container instead, because the container is the right height.

In other words, make one big background image for the container that
extends underneath the floats as well, and is visible through the whole
lot. Of course you can make an image that looks different at the two
edges that are underneath the floats, so that the finished effect looks
like the floats have their own distinct background images, and that
everything is all the same height.

 

[dorayme]

It is a bit of a weird side-effect of overflow: hidden.

See

http://groups.google.co.uk/group/comp.infosystems.www.authoring.stylesheets/ms
g/22eadc1c6622d5c5

and

http://groups.google.co.uk/group/alt.html/msg/eeac004d67abb772

dorayme has a webpage about containment of descendent floats with some
examples but I can't find the url.

It is (in its unfinishedness) at:

http://netweaver.com.au/floatHouse/page1.html

but I am yet to get to practical things like ways to make the
parent grow height to cover the floated children. The div clear
route is well known, the overflow is very interesting and I have
yet to look closely at it.

 

[rf]

It is (in its unfinishedness) at:

http://netweaver.com.au/floatHouse/page1.html

but I am yet to get to practical things like ways to make the
parent grow height to cover the floated children. The div clear
route is well known, the overflow is very interesting and I have
yet to look closely at it.

dorayme, both you and Ben C are *almost* there.

The thing to look for is block formatting context:
http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Yes, there is bugger all there but the clue to follow is "elements with
'overflow' other than 'visible'". That is where the overflow: hidden comes
into it. It establishes a new block formatting context. I usually however
use overflow: scroll so as not to hide content, just in case our viewer does
odd things with her canvas dimensions.

A block level element that establishes a new block formatting context
"contains" floats and clears. This has two effects:

The block expands to contain any decendent element that is floated. It
"contains" the floats.

Clears do not propogate outside the block. The block "contains" the clears.

HTH

 

[Ben C]

It is (in its unfinishedness) at:

http://netweaver.com.au/floatHouse/page1.html

That's more about float placing. I meant the other one. You had a box
with some floats in it and some parables about parents ignoring their
children.

 

[Ben C]

[...]
dorayme, both you and Ben C are *almost* there.

The thing to look for is block formatting context:
http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Ahem. I believe I explained all this in the link above, pointing out
that the places to look are 9.4.1 and 10.6.7.

"*almost* there" indeed.

Yes, there is bugger all there but the clue to follow is "elements with
'overflow' other than 'visible'". That is where the overflow: hidden comes
into it. It establishes a new block formatting context. I usually however
use overflow: scroll so as not to hide content, just in case our viewer does
odd things with her canvas dimensions.

A block level element that establishes a new block formatting context
"contains" floats and clears. This has two effects:

The block expands to contain any decendent element that is floated. It
"contains" the floats.

Clears do not propogate outside the block. The block "contains" the clears.

Other effects too. Most significant is that other floats that start
outside the BFC will not intrude into the BFC. This means the BFC itself
may become narrower to squeeze between floats.

In other words:

<div style="float: left; height: 200px; width: 100px; background-color:
red">
<div>
<div style="overflow: hidden; border: 5px solid blue">
Hello
</div>

Look at where the left border of the second div is, then remove
overflow: hidden.

 

[rf]

It is (in its unfinishedness) at:

http://netweaver.com.au/floatHouse/page1.html

Are you going to offer this up for critique when it is "finished"?

 

[dorayme]

It is (in its unfinishedness) at:

http://netweaver.com.au/floatHouse/page1.html

That's more about float placing. I meant the other one. You had a box
with some floats in it and some parables about parents ignoring their
children.[/QUOTE]

Ah... you mean:

http://netweaver.com.au/floatHouseOfAlice/normalHouse.html

I found it still on the server. Well, that one was just an
earlier version of the longer one. You have to read the longer
one on a bit to see that it *is* concerned about how to think
about parents, floated children and height. In the earlier one I
was talking about parental retaliation, and playing silly buggers
with a set of floats that were designed to look like a book.

In the later longer treatise <g>, I was more serious and
substituted the image of the parent being simply blind to floated
children. I tried to solve a few problems in all of this by
having floated children themselves being aware of not only their
siblings (both floated and non-floated) but also being aware of
their parents position. Placement, height and how to think of all
these things were sort of all parts of one story.

Probably slightly wincing reading for experts, but the earlier
version was even more so. In the earlier version there was the
image of the parent rejecting floated children, in the later
there is the image of the parent being blind to them (ie. your
"ignoring" is still an important image. It is just that the
ignoring in the later one is helpless rather than conscious <g>)

 

[dorayme]

Are you going to offer this up for critique when it is "finished"?

No. I mean yes. No. Yes. No. Yes. No. Hell, I dunno. Never
occurred to me, this all started when an Eastern Suburbs
maternity hospital contacted me, they had heard that there was a
complete idiot in town who took a bit of interest in these
matters. This idiot had been spotted walking around dangling in
front of passing children helium balloons that had things like
"{float: left; margin:0.5em; width: 7em;}" on them. The police
were called and it got a bit of news.

Anyway, the hospital, a private one - you know the wealth and
progressiveness of Eastern Suburbs mums - were keen to get their
kids a head start in the IT world. So the hospital asked me to
design a course for the babies...

Mate, seriously, I am going to have it bound and printed, it will
be a weighty tome and I will invite you to a pub, we will drink
heavily and then I will slap it onto the bar and let you rip into
it, I know you are rearing to go but it will be a more pleasant
experience all around if we are both blind drunk.

 

[dorayme]

but I am yet to get to practical things like ways to make the
parent grow height to cover the floated children. The div clear
route is well known, the overflow is very interesting and I have
yet to look closely at it.

dorayme, both you and Ben C are *almost* there.
[/QUOTE]

This sounds a touch... ahem... never mind... it is early, I have
a stack of work, I must keep calm...

Let me just say, for my part, I am not really anywhere - think
John Lennon's Nowhere Man.

My "yet to get" was meant to refer to that story I was telling,
it is really incomplete...

Still, I found your subsequent remarks interesting and will study
them in due course. I return to my important educational work on

 

[Ben C]

That's more about float placing. I meant the other one. You had a box
with some floats in it and some parables about parents ignoring their
children.

Ah... you mean:

http://netweaver.com.au/floatHouseOfAlice/normalHouse.html[/QUOTE]

Yes that's the one I was thinking of.

I found it still on the server. Well, that one was just an
earlier version of the longer one. You have to read the longer
one on a bit to see that it *is* concerned about how to think
about parents, floated children and height.

You're right, I had forgotten that. I only remembered the next bit about
how floats and inlines arrange themselves.

In fact there's some good stuff there about container heights between
about pages 3 and 5 which might be useful to the OP to look at.

 

[rf]

Ahem. I believe I explained all this in the link above, pointing out
that the places to look are 9.4.1 and 10.6.7.

"*almost* there" indeed.

Sorry. As you can see that link wrapped and I couldn't be bothered putting
it back together again.

 

[dorayme]

Yes that's the one I was thinking of.


You're right, I had forgotten that. I only remembered the next bit about
how floats and inlines arrange themselves.

In fact there's some good stuff there about container heights between
about pages 3 and 5 which might be useful to the OP to look at.

I now need to incorporate some things about these block
formatting contexts of which you (and rf) speak. Interesting
stuff. I am thinking of ditching a lot of stuff about browser
differences, these differences simply take up all of one's time!
I wish the W3C had made their own browser to follow their own
standards. Then everyone would see at a glance how IE and Safari
and FF measure up to the standard.

 

[Ben C]

I now need to incorporate some things about these block
formatting contexts of which you (and rf) speak. Interesting
stuff.

Yes. The idea there is that they limit the scope of floats. Usually
floats spill out of their containers and anything inline that's in the
way has to flow around them.

Block formatting contexts limit the damage. A float never sticks out of
one or into one. Clear refers to floats within your own BFC. A BFC is
the smallest guaranteed "sealed environment" for floats. All the other
rules for BFCs can be understood in terms of this basic idea.

The purpose of block formatting contexts is floats, they aren't relevant
to anything else that I can see. They might have been named "float
contexts" instead, perhaps less confusingly.

I am thinking of ditching a lot of stuff about browser
differences, these differences simply take up all of one's time!

Yes, good plan. That's a separate document (to put off writing until
people have stopped using IE anyway). Although you might want to make
brief mention of the Firefox/IE7 shared non-conformance of always
putting floats in the next line if there are any inlines preceding them,
since that's quite a big one.

I wish the W3C had made their own browser to follow their own
standards.

I think that's what Amaya was meant to be, but it is hopeless at
following the standards getting basic things completely wrong. The
authoring tool side of it is said to be not bad however if you like that
kind of thing.

Then everyone would see at a glance how IE and Safari and FF measure
up to the standard.

Certainly a proper reference implementation would be good. For one thing
it would prove whether it was actually possible.

 

[dorayme]

The purpose of block formatting contexts is floats, they aren't relevant
to anything else that I can see. They might have been named "float
contexts" instead, perhaps less confusingly.

OK. So when I am thinking and saying things like containers are
normally blind to their floated children, except for some IE
family containers (which auto grow height for them), I will be
adding that there is an official way to cause parents to see
their floated children, namely to trigger a BFC. An author can
always specify a height: but this "covering of the children" is
mere forcing the blind parent to provide something, it shows no
inner awareness (as it were) of the floated children. However, an
author giving the container a BFC gives the parent a more inner
intelligence, an awareness that can fend for itself, in effect,
it covers its floated children all by itself once the author has
triggered some genes in it...

Just thinking aloud...

Yes, good plan. That's a separate document (to put off writing until
people have stopped using IE anyway). Although you might want to make
brief mention of the Firefox/IE7 shared non-conformance of always
putting floats in the next line if there are any inlines preceding them,
since that's quite a big one.

And, of course, there is the ever present danger in these things
that I don't know what browser a reader might be using to read my
efforts. So some stuff about browsers will be inevitable

I think that's what Amaya was meant to be, but it is hopeless at
following the standards getting basic things completely wrong. The
authoring tool side of it is said to be not bad however if you like that
kind of thing.


Certainly a proper reference implementation would be good. For one thing
it would prove whether it was actually possible.

I like this thought of yours. Damn good one, is it really
possible to follow the standards as written? It may not be. (In
fact, it is *probably not possible* under some rigid
interpretation <g>).