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

Quick query: margin-bottom of absolutely positioned block

P: n/a
This should be a quick one.

URL: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html
Code:
=============================
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01//EN">
<HTML><Head><Title>Get my feet off the ground</Title>
<Meta HTTP-Equiv="Content-Type" Content="text/html; charset=us-ascii">
<Style type="text/css">
Body { font-size: 60px; }
Div { margin: 50px; border: thick green solid;
position: absolute; top: 0; left: 0; }
</Style></Head>
<Body>
<Div>
Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa
<BR><BR><BR><BR><BR><BR><BR><BR>Omega
</Div>
</Body>
</HTML>
==============================

Why is the bottom border of the 'div' element flush with the bottom
of the window, at least in Netscape and Internet Explorer? And how do
I make the window extent to include the bottom margin of the 'div'?

Thank you!
Christopher
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Christopher wrote:

URL: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html
Code:
=============================
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01//EN">
<HTML><Head><Title>Get my feet off the ground</Title>
<Meta HTTP-Equiv="Content-Type" Content="text/html; charset=us-ascii">
<Style type="text/css">
Body { font-size: 60px; }
Div { margin: 50px; border: thick green solid;
position: absolute; top: 0; left: 0; }
</Style></Head>
<Body>
<Div>
Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa
<BR><BR><BR><BR><BR><BR><BR><BR>Omega
</Div>
</Body>
</HTML>
==============================

Why is the bottom border of the 'div' element flush with the bottom
of the window, at least in Netscape and Internet Explorer? And how do
I make the window extent to include the bottom margin of the 'div'?


It isn't. It is below the bottom of my screen. I only see if after I
scroll down. (Is that what you meant?) That is a result of the
<BR><BR><BR> etc. What are those doing there? And why have you set
font-size in pixels?
--
Brian
follow the directions in my address to email me

Jul 20 '05 #2

P: n/a
Brian <us*****@mangymutt.com.invalid-remove-this-part> wrote in message
news:<R_*******************@rwcrnsc51.ops.asp.att. net>...
Christopher wrote:

URL: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html
Code:
=============================
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01//EN">
<HTML><Head><Title>Get my feet off the ground</Title>
<Meta HTTP-Equiv="Content-Type" Content="text/html; charset=us-ascii">
<Style type="text/css">
Body { font-size: 60px; }
Div { margin: 50px; border: thick green solid;
position: absolute; top: 0; left: 0; }
</Style></Head>
<Body>
<Div>
Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa
<BR><BR><BR><BR><BR><BR><BR><BR>Omega
</Div>
</Body>
</HTML>
==============================

Why is the bottom border of the 'div' element flush with the bottom
of the window, at least in Netscape and Internet Explorer? And how do
I make the window extent to include the bottom margin of the 'div'?
It isn't. It is below the bottom of my screen. I only see if after I
scroll down. (Is that what you meant?) That is a result of the
<BR><BR><BR> etc. What are those doing there?


I see now that I was not very clear in stating my problem. The 'div' has
'margin: 50px'. Thus I expect the initial containing block to be at least
50px bigger than it in every direction, if it can. This occurs fine on the
top, left, and right edges. However, the containing block does -not-
extend 50px -below- the 'div' as I would expect. This effect is only
noticable when you have to scroll, which is why I included all those
'<br>'s and made the font so big.

I realize now that this won't necessarily happen on a huge display. Sorry
I forgot to mention that. If you can't see what I'm talking about, shrink
your window to be no more than 600 pixels tall.
And why have you set
font-size in pixels?


For illustration purposes only, I assure you. I have no more intention of
using this exact style sheet in my final document than I have of using
this exact content!

Thanks,
Christopher
Jul 20 '05 #3

P: n/a
I'm just going to restate this problem another way. Consider the
following HTML documents:

#1: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html
#2: http://cfa-www.harvard.edu/~cpilman/Stuff/flush2.html

I want to modify #1 so that it behaves like #2 in Opera 7, IE 6, and
Netscape 7 (for Win2K, if it makes a difference), in a window of
around 800 by 600 pixels. These UAs at this resolution are not the
*only* ones I care about, but it's what's currently giving me trouble.

The two documents appear similarly; the only difference is how far down
you can scroll. In #1, these browsers stop at the bottom of the bottom
border of the div. In #2, you can scroll past that. This is accomplished
in an (IMHO) artificial way by nesting one div inside another. I would
like to do it with a single div, positioned absolutely.

If this is impossible to do, I will accept that as an answer and use the
nested div solution.

Now, to respond to comments:

Lauri Raittila <la***@raittila.cjb.net> wrote in message
news:<MP************************@news.cis.dfn.de>. ..
In article <d1**************************@posting.google.com >, Christopher
wrote:
Brian <us*****@mangymutt.com.invalid-remove-this-part> wrote in message
news:<R_*******************@rwcrnsc51.ops.asp.att. net>...
Christopher wrote:
>
> URL: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html Why is the bottom border of the 'div' element flush with the bottom
> of the window, at least in Netscape and Internet Explorer? And how do
> I make the window extent to include the bottom margin of the 'div'?
I see now that I was not very clear in stating my problem. The 'div' has
'margin: 50px'. Thus I expect the initial containing block to be at least
50px bigger than it in every direction, if it can.


Initial containing block is same size as viewport/whatever size it
pleases. It overflows.

What you mean is that you would want to be able to scroll canvas to
margins of elements, not just content and border. That is entirely User
agents business IIANM. And most browsers don't want to show scrollbars
for empty space


I may be misunderstanding you, but I don't think it's as simple as that.
For instance, these browsers will show scrollbars for empty space if it's
part of the margin of a statically positioned block element. They won't
do it for an absolutely positioned one, though, it seems.
This occurs fine on the top, left, and right edges.


Wou tried it on 100px wide screen? What browser? In Opera 7.2b1 same
happens on right side as on bottom.


I installed Opera, and the behavior is similar to that of Netscape and IE.
A 100-pixel window introduces more complications, because the viewport is
not as wide as the div's containing block, if I understand this correctly:
< http://www.w3.org/TR/REC-CSS2/visude...replaced-width >

So, if you don't mind, I'd like to get a grip on what's going on in the
case of a wider window before tackling that.
However, the containing block does -not-
extend 50px -below- the 'div' as I would expect.


Containing block only changes size on IE. (or it just looks thatway)

Try html, body {size:100%;border:1px solid red} and make it overflow, and
you see the size of initial containing block ( as size of body is then
same as initial containing blocks)


I did this. In both Opera and Netscape, the body block does not contain the
div, but the html block does. Are you sure the size attribute applies to
html and body? Anyway, I'm not sure what you're saying with this example.
Could you clarify?
Thread whitout conclusion in opera.beta, lots of stuff about initial
containing block, differences between CSS2 and 2.1, root elemnts etc.
Google if interested. "raittila root initial opera.beta" should find
thread.

I hope this helps.


Okay, I read that thread, and it does help somewhat. I think I understand
why now. I still don't know if there's a way around it.

Thank you,
Christopher
Jul 20 '05 #4

P: n/a
In article <d1*************************@posting.google.com> , Christopher
wrote:
I'm just going to restate this problem another way. Consider the
following HTML documents:

#1: http://cfa-www.harvard.edu/~cpilman/Stuff/flush.html
#2: http://cfa-www.harvard.edu/~cpilman/Stuff/flush2.html

I want to modify #1 so that it behaves like #2 in Opera 7, IE 6, and
Netscape 7 (for Win2K, if it makes a difference), in a window of
around 800 by 600 pixels.
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01//EN">
<Title>Get my feet off the ground</Title>
<Style type="text/css">
Body { font-size: 60px; }
Div { margin: 50px; border: thick green solid; }
</Style>
<Div>
Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa
<BR><BR><BR><BR><BR><BR><BR><BR>Omega
</Div>

Stripped all non necessary out. It started working...
These UAs at this resolution are not the
*only* ones I care about, but it's what's currently giving me trouble. I would like to do it with a single div, positioned absolutely.
Why it needs to be positioned absolutely? That is key question. As it
works fine whitout it? Maybe we can start solving the real problem now?

If it doesn't need to work on IE, you don't even need the div BTW:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<Head><Title>Get my feet off the ground</Title>
<style type="text/css">
Body { font-size: 60px;margin: 50px; border: thick green solid;}
</style>
Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa
<BR><BR><BR><BR><BR><BR><BR><BR>Omega
Lauri Raittila <la***@raittila.cjb.net> wrote in message
news:<MP************************@news.cis.dfn.de>. ..
Initial containing block is same size as viewport/whatever size it
pleases. It overflows.

What you mean is that you would want to be able to scroll canvas to
margins of elements, not just content and border. That is entirely User
agents business IIANM. And most browsers don't want to show scrollbars
for empty space


I may be misunderstanding you, but I don't think it's as simple as that.


It sure isn't simple.
For instance, these browsers will show scrollbars for empty space if it's
part of the margin of a statically positioned block element. They won't
do it for an absolutely positioned one, though, it seems.
True. But it is still their decision. I don't know if it is good, but
IIRC spec says that they should provide scrolling mechanism for _content_

And since extra scrolling is usually not wanted, when it has been
easier/as easy to implement the way it is now, people implemented it that
way.
So, if you don't mind, I'd like to get a grip on what's going on in the
case of a wider window before tackling that.
The reason I pointed it out was that exactly same thing happens on right,
when canvas you use is wider than viewport. You only see this in so small
window, because text wraps downwards.
Containing block only changes size on IE. (or it just looks thatway)

Try html, body {size:100%;border:1px solid red} and make it overflow, and
you see the size of initial containing block ( as size of body is then
same as initial containing blocks)


I did this. In both Opera and Netscape, the body block does not contain the
div, but the html block does. Are you sure the size attribute applies to
html and body?


Yes, unless one of them is considered as initial containing block. Either
of them is the initial containing block is specified in spec, as well as
root element is contained in initial containing box. By CSS2. By CSS21,
initial containing box contains root element, and is the way Mozilla and
Opera understands that. (In other words, CSS2 is unclear about this)
Anyway, I'm not sure what you're saying with this example.
Could you clarify?


The point is that initial containing block isn't changing size by
content. No matter how much content, body and html elements are same size
when you specify them to be 100%, which means that they are 100% from
initial containing block. Since initial containing block is not any
element in document, you can't style it directyl, and therefore you can't
see it.

--
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 #5

This discussion thread is closed

Replies have been disabled for this discussion.