By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,869 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

Two Questions

P: n/a
Sorry for the somewhat enigmatic subject, but I couldn't find a better one.
I'm doing an "XHTML Strict" page, compatible with IE5+, NN6+, Opera, Mozilla
and as many others as possible. I stumbled over two problems:

1) <div id="outer">
<div id="floated">...</div>
<div id="normal">...</div>
</div>

The div "floated" is floated left, the "normal" div has a left margin wide
enough to "accomodate" the floated div, so they sit happily side by side.
The "normal" div's height is smaller than the "floated" div's height. All
the divs are positioned relative, no explicit height is specified. But when
I put a border around the "outer" div, it actually "covers" only about the
"normal" div, and the "floated" div sort of "leaks out" of the bordered
area. Does floating have a similar effect as "position:absolute", i.e.
taking the div out of the normal flow? But should not even then the
"nestedness" of the divs be preserved?

2) How do I achieve the following (I have tried, but without success):

<div id="top">...</div>
<div id="main">...</div>
<div id="bottom">...</div>

The height of the divs varies, but I want the "main" div to stretch
vertically if necessary so that the "bottom" div will never "rise" above the
bottom of the window, i.e. if the combined heights of the three is not
enough to fill the window vertically, then "main" should be stretched in
height (i.e. empty space should be added at its bottom), but if the combined
heights are greater than the window's height (and thus there is a scrollbar)
then the "bottom" div should not stick at the bottom of the window, but
remain underneath the "main" div.

Thanks in advance,
Thomas
Jul 20 '05 #1
Share this Question
Share on Google+
18 Replies


P: n/a
Thomas Mlynarczyk wrote:
1) <div id="outer">
<div id="floated">...</div>
<div id="normal">...</div>
</div>

The div "floated" is floated left, the "normal" div has a left margin
wide
enough to "accomodate" the floated div, so they sit happily side by side.
The "normal" div's height is smaller than the "floated" div's height. All
the divs are positioned relative, no explicit height is specified. But
when I put a border around the "outer" div, it actually "covers" only
about the "normal" div, and the "floated" div sort of "leaks out" of the
bordered area. Does floating have a similar effect as "position:absolute",
i.e. taking the div out of the normal flow? But should not even then the
"nestedness" of the divs be preserved?


http://www.complexspiral.com/publica...aining-floats/

--
David Dorward <http://dorward.me.uk/>
Jul 20 '05 #2

P: n/a
Also sprach David Dorward:
http://www.complexspiral.com/publica...aining-floats/


Thanks - that solved my problem number 1. :-)
Is there an equally easy solution to my second one?

Greetings,
Thomas

Jul 20 '05 #3

P: n/a
"Thomas Mlynarczyk" <bl*************@hotmail.com> wrote in message
news:bu*************@news.t-online.com...
1) <div id="outer">
<div id="floated">...</div>
<div id="normal">...</div>
</div>

The div "floated" is floated left...


Just a side note, and one of rather minimal importance at that - I don't
know if these are the actual id's of your div's, but it is preferable to
name a div according to its content rather than its position, for HTML is a
markup language, not a presentational one. So perhaps a better structure
would be

<div id="container">
<div id="navigation">...</div>
<div id="content">...</div>
</div>

The reasoning behind this is that you can change layouts with no regard to
the names of the structural elements, because <div id="floated"> links that
div to a specific layout, whereas <div id="navigation"> does not.

Christopher Finke
Jul 20 '05 #4

P: n/a
Also sprach Christopher Finke:
Just a side note, and one of rather minimal importance at that - I
don't know if these are the actual id's of your div's, but it is
preferable to name a div according to its content rather than its
position, for HTML is a markup language, not a presentational one.


Ah, yes, of course you are right. In fact, my "real" divs have names which
are more suited to describe their contents.
Jul 20 '05 #5

P: n/a
In article Thomas Mlynarczyk wrote:
Sorry for the somewhat enigmatic subject, but I couldn't find a better one.
I'm doing an "XHTML Strict" page, compatible with IE5+, NN6+, Opera, Mozilla
and as many others as possible. I stumbled over two problems:

[Snip description of correct behaviour on floats.]
Does floating have a similar effect as "position:absolute", i.e.
taking the div out of the normal flow?
Yes, exept that float changes line-boxes.
2) How do I achieve the following (I have tried, but without success):

<div id="top">...</div>
<div id="main">...</div>
<div id="bottom">...</div>

The height of the divs varies, but I want the "main" div to stretch
vertically if necessary so that the "bottom" div will never "rise" above the
bottom of the window, i.e. if the combined heights of the three is not
enough to fill the window vertically, then "main" should be stretched in
height (i.e. empty space should be added at its bottom), but if the combined
heights are greater than the window's height (and thus there is a scrollbar)
then the "bottom" div should not stick at the bottom of the window, but
remain underneath the "main" div.


IIRC, this works widely in browsers:
http://steve.pugh.net/test/test62.html


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #6

P: n/a
Also sprach Lauri Raittila:
IIRC, this works widely in browsers:
http://steve.pugh.net/test/test62.html


Thanks a lot - it seems to work, except for OP6 which puts the footer
several lines above the bottom when there is a vertical scrollbar (so that,
when scrolling to the top, the footer appears at the bottom of the window).
Is there a way to fix that? One slight drawback: the height of the footer
must be fixed. Although I could specify a relative height like "2em", this
would not take into account possible line wrappings in the footer text. Is
there a solution for this?

Thanks again,
Thomas
Jul 20 '05 #7

P: n/a
"Thomas Mlynarczyk" <bl*************@hotmail.com> wrote:
Also sprach Lauri Raittila:
IIRC, this works widely in browsers:
http://steve.pugh.net/test/test62.html

That's an older version, which also has a problem in Opera 7 whereby
the footer appears off the bottom of screen.

This is fixed in the newer version at:

http://steve.pugh.net/test/test57.html (lots of text to show footer at
end of content)
http://steve.pugh.net/test/test57a.html (little text to show footer at
bottom of screen)

(Redirect now set up so anyone stumbling across this thread will end
up at the new version)
Thanks a lot - it seems to work, except for OP6 which puts the footer
several lines above the bottom when there is a vertical scrollbar (so that,
when scrolling to the top, the footer appears at the bottom of the window).
Is there a way to fix that?
No, this problem occurs with the newer version as well in Operas 5 and
6. I think the solution is to hide some of the CSS from those Opera
versions so that the footer always follows after the content.
One slight drawback: the height of the footer
must be fixed. Although I could specify a relative height like "2em", this
would not take into account possible line wrappings in the footer text. Is
there a solution for this?


I don't think so. You could leave the footer itself with no height
without any problems, but the content needs a padding-bottom tall
enough to leave room for the footer to be displayed.

Here's a version with no height set on the header or footer and the
absolute positioing of the footer hidden from Opera 5/6.

http://steve.pugh.net/test/test57b.html

cheers,
Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #8

P: n/a
In article Steve Pugh wrote:
"Thomas Mlynarczyk" <bl*************@hotmail.com> wrote:
Also sprach Lauri Raittila:
IIRC, this works widely in browsers:
http://steve.pugh.net/test/test62.html

That's an older version, which also has a problem in Opera 7 whereby
the footer appears off the bottom of screen.


Hm. There is propably some change happened in Opera 7, as there was no
problems using Opera 7.5p1. I remembered that there was problem with
Opera, so I thought that this was the working version as it worked in
Opera 7...
This is fixed in the newer version at:

http://steve.pugh.net/test/test57.html (lots of text to show footer at
end of content)
http://steve.pugh.net/test/test57a.html (little text to show footer at
bottom of screen)
Thanks.
(Redirect now set up so anyone stumbling across this thread will end
up at the new version) No, this problem occurs with the newer version as well in Operas 5 and
6. I think the solution is to hide some of the CSS from those Opera
versions so that the footer always follows after the content.
One slight drawback: the height of the footer
must be fixed. Although I could specify a relative height like "2em", this
would not take into account possible line wrappings in the footer text. Is
there a solution for this?
I don't think so. You could leave the footer itself with no height
without any problems, but the content needs a padding-bottom tall
enough to leave room for the footer to be displayed.


There is afaik just one, and IMHO it is not good at all. It is
dublicating footer, and using visibility:hidden; for other and
positioning for other.

I wouldn't use it. It might be considered spamming search engines too.
Here's a version with no height set on the header or footer and the
absolute positioing of the footer hidden from Opera 5/6.

http://steve.pugh.net/test/test57b.html


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #9

P: n/a
Steve Pugh wrote:

Here's a version with no height set on the header or footer and the
absolute positioing of the footer hidden from Opera 5/6.

http://steve.pugh.net/test/test57b.html


Perhaps you can adjust this a bit more to hide nasties from MacIE5, too
<URL:http://accessat.c-net.us/screenshots/spugh-macie5.png>

Oddly enough, when I followed a link on this page, then used the browser
"back" button, the footer was magically positioned at the bottom of the
content. A reload returned it to the spot shown in the screen shot.

BTW, Safari doesn't support the min- or max- properties, but at least it
doesn't overlay the footer on any content.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.
Jul 20 '05 #10

P: n/a
Also sprach Lauri Raittila:
Hm. There is propably some change happened in Opera 7, as there was no
problems using Opera 7.5p1. I remembered that there was problem with
Opera, so I thought that this was the working version as it worked in
Opera 7...


As far as I have tested, the problem appeared only in OP6 (haven't tested
earlier versions yet). It worked correctly in OP7 - a beta version.
I don't think so. You could leave the footer itself with no height
without any problems, but the content needs a padding-bottom tall
enough to leave room for the footer to be displayed.


There is afaik just one, and IMHO it is not good at all. It is
dublicating footer, and using visibility:hidden; for other and
positioning for other.


<dream>What we would need is something similar to "*" when specifying a
frameset: telling the browser to use all the remaining space.</dream>

Jul 20 '05 #11

P: n/a
Also sprach kchayka:
Perhaps you can adjust this a bit more to hide nasties from MacIE5,
too <URL:http://accessat.c-net.us/screenshots/spugh-macie5.png>

Oddly enough, when I followed a link on this page, then used the
browser "back" button, the footer was magically positioned at the
bottom of the content. A reload returned it to the spot shown in the
screen shot.


That's what I had experienced with my Opera6. When the footer "rises above
the bottom" it is actually positioned so that it *would* be at the bottom
*if* you scrolled to the top of the page. I suppose the problem can be
solved by hiding some CSS rule from MacIE5, similarly to what was done to
fix the Opera problem.

Jul 20 '05 #12

P: n/a
Also sprach Steve Pugh:
http://steve.pugh.net/test/test57b.html


Works great - thanks a lot :-)))
By the way: the old version had a "top:0; left:0;" specified for the #holder
div, which the new one hasn't. Any particular reason for this? Because (I
think that's the reason) the lack of the explicit positioning causes NN4 to
leave some space (default margin I suppose). And is there any particular
reason why the margin-bottom of the older version (#nav and #content) was
changed to padding-bottom?

Greetings,
Thomas


Jul 20 '05 #13

P: n/a
"Thomas Mlynarczyk" <bl*************@hotmail.com> wrote:
Also sprach Steve Pugh:
http://steve.pugh.net/test/test57b.html
Works great - thanks a lot :-)))
By the way: the old version had a "top:0; left:0;" specified for the #holder
div, which the new one hasn't. Any particular reason for this?


I can't remember making that change. Sorry.
Looking at the code, #holder still has position: absolute; and the
calculated values of top and left in this case should be 0. I probably
removed them for debugging purposes at some point as they made no
difference forgot to put them back in.
Because (I think that's the reason) the lack of the explicit positioning
causes NN4 to leave some space (default margin I suppose).
So long as there's no overlapping text in NN4 I think we should be
thankful. At the moment none of the CSS in the test pages is hidden
from NN4 (apart from the workarounds for Opera 5/6) and nothing
horrendous happens, that's quite
And is there any particular reason why the margin-bottom of the
older version (#nav and #content) was changed to padding-bottom?


Yes. The problem in Opera 7 (at least with the 7.2x versions I tested
with; from other posts it seems that 7.5 may have changed things)
seems to have been that Opera 7 was the only browser to collapse
vertical margins properly and this resulted in the footer being
positioned off the screen. Changing margin-bottom to padding-bottom
solved that. See
http://groups.google.com/groups?selm...ews.cis.dfn.de
for the details.
Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #14

P: n/a
kchayka <kc*********@sihope.com> wrote:
Steve Pugh wrote:

Here's a version with no height set on the header or footer and the
absolute positioing of the footer hidden from Opera 5/6.

http://steve.pugh.net/test/test57b.html
Perhaps you can adjust this a bit more to hide nasties from MacIE5, too
<URL:http://accessat.c-net.us/screenshots/spugh-macie5.png>


Sigh. At least hiding from Mac IE5 is easy. Now done in the version at
the URL above.
BTW, Safari doesn't support the min- or max- properties, but at least it
doesn't overlay the footer on any content.


I really don't know enough about the details of Safari's CSS support.
Win IE doesn't support min-height either but that's not a problem as
it gets height and overflow wrong anyway. What does Safari do? Just
slap the footer after the content regardless?

Hmm, the number of browsers this works in is shrinking all the time.
Still it does work in Win IE5+, Gecko, Opera 7 (7.2 only?) and
degrades gracefully in the rest.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #15

P: n/a
Lauri Raittila <la***@raittila.cjb.net> wrote:
In article Steve Pugh wrote:
"Thomas Mlynarczyk" <bl*************@hotmail.com> wrote:
>Also sprach Lauri Raittila:
>
>> IIRC, this works widely in browsers:
>> http://steve.pugh.net/test/test62.html


That's an older version, which also has a problem in Opera 7 whereby
the footer appears off the bottom of screen.


Hm. There is propably some change happened in Opera 7, as there was no
problems using Opera 7.5p1. I remembered that there was problem with
Opera, so I thought that this was the working version as it worked in
Opera 7...


The problem was definitely there this morning in Opera 7.23.
I've not downloaded the 7.5 beta yet. I've also had reports of other
problems in 7.11. Sometimes I think that Opera moves far too fast to
keep up with.

cheers,
Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #16

P: n/a
Also sprach Steve Pugh:
Looking at the code, #holder still has position: absolute; and the
calculated values of top and left in this case should be 0. I probably
removed them for debugging purposes at some point as they made no
difference forgot to put them back in.


But it seems they do in fact make a difference to NN4 - I just tested:
without them, the #header is offset by a few pixels from the top left
corner, with them, it is not. Of course, with NN4, #header and #footer don't
stretch to the full width of the window, nor does the #footer stick to the
bottom when there is little content, but considering what one is used to
when it comes to displaying a page in NN4, your code works very well indeed.

Greetings,
Thomas
Jul 20 '05 #17

P: n/a
Steve Pugh wrote:

http://steve.pugh.net/test/test57b.html


What does Safari do? Just
slap the footer after the content regardless?


Yup, at least build 85 does.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.
Jul 20 '05 #18

P: n/a
kchayka wrote:

Safari doesn't support the min- or max- properties


Ouch. That's quite disappointing for a browser that seems so good
otherwise. I've only played with it a bit at my sister's, so maybe
it's not all I thought it was.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Jul 20 '05 #19

This discussion thread is closed

Replies have been disabled for this discussion.