Re: div width, IE7 vs. Firefox2

Mark wrote:

(snip)

Hey pal, I get a 404 on that page too, but from what I can tell you are
having trouble with positioning. I can sort of see what you were doing
maybe, you made your menu over 600px and then you declared it absolute so
you could bury it with z-index, and now you are trying to overlay it with
your content and whatever. And whatever you said about tabling just gets
you into more trouble. And now you are trying to position things by padding
and and it just gets all tangled.

OK, slow down. You know how to table. We used to call it "tabling it out" in
the HTML4x days. These days we call it "blocking it out". So you are on the
right track to start. You see a composition, your mind opens a table, a
master table and every compositional element, you open a table within that
master. No big deal. Now just see them as "block level elements" which
means all those nested tables are now called blocks. So the header is a
block, the menu is a block, the content is a block, the footer is a block.
Same visual process of "cutting up". So with CSS, we just mentally cut it
up and open a block for every compositional element in HTML in a div.

<div id="header">hi, this is the header</div>
<div id="menu>Hi here is the menu</div>
<div id="content">Hi here is all your content</div>
<div id="footer">and here is your footer</div>

Don't worry about id selectors or class selectors for now, stay simple.

Now that you have your compositional elements identified, you can position
them anywhere you want with CSS. And one of the best ways to start is to
position them with MARGINS or ABSOLUTE, not padding, not EMs. Because we
almost always want to fit the page into whatever resolution the client
wants. If their clients are rich, you probably want to build for 1024
width. If the clients are poor, you might drop back as far as 800. And so
we set the page up with a static pixel width most of the time.

Having said that, it's really neat to position things in absolute, but
everybody gets confused on the nomenclature. It makes sense to nail down
one element absolutely and position everything relative to that element. In
CSS however, it's kind of backwards. Whatever element you call "relative"
is now fixed in position on page, and every element you want to position
off that is positioned as absolute. Think of it like "this element is
absolutely positioned, relative to the element I declared as it's
relative". It's not the truth but it's more descriptive. And z-index just
becomes an unused trick in the bag.

Why tell you all this? Especially when I'm just telling what what "what's
his name" said in his immortal "colored blocks" tutorial? Because margin
positioning was better understood at that time. When I did this, I was
fascinated by our new-found capability of absolutes. Just sounds better to
me. I believe in absolute truth. I belive in absolute love and absolute
devotion. But that's just me.

So you can literally watch me as I got a grip on it in the following:

http://www.dataspheric.com/dev/trevo..._container.php
http://www.dataspheric.com/dev/trevo...container1.php
http://www.dataspheric.com/dev/trevo...container2.php
http://www.dataspheric.com/dev/trevo...container3.php
http://www.dataspheric.com/dev/trevo...container4.php

You can do the exact same thing with margins.

Notice how I "blocked" things out with the styles inline? Notice how I
margined the styles? Just helps you visually see the elements until we
break out the style sheet.

Notice how we assign height values to the blocks before content actually
goes in? When content goes in, we might stipr the height values and let
content flow. Or we might use the great Grey Wyvern's "jack" method.

Now for box-model hacks, we can increase padding or margins. See what we
did? We saved the margin/padding tricks for last.

OK, LET'S TIE IT TOGETHER.

I could have declared my body div in margin terms. If my header was 100px
long, I would have positioned my content to be

#content {top: 100px;}

Now just one more thing, when I use absolute, I usually open a "content"
or "body" div tag, and nest everyting in that because the first opening tag
usually is defined by the browser as starting from the top right and
flowing down left.

I hope that helps. And if there are any mistakes in here, I don't want to
hear about it. If anyone thinks they can one-up me, I don't care. This
simple technique will work for you.

And especially if some person known as 1001 Webs even talks to me, forget
it. Chad is a dude and you are not a person I wish to communicate to on any
level at any time or at any place. I just wrote what I remember and I
haven't been a line-of-service coder for 10 years.

Regards to Shags, Sweeney, Vipes, Inkster, Binks, Space G, Heidi, Probes,
sobes, et al.

On Nov 11, 8:04 am, Spheric <no... (AT) nothanks (DOT) yo> wrote:

Mark wrote:

(snip)

Hey pal, I get a 404 on that page too, but from what I can tell you are
having trouble with positioning. I can sort of see what you were doing
maybe, you made your menu over 600px and then you declared it absolute so
you could bury it with z-index, and now you are trying to overlay it with
your content and whatever. And whatever you said about tabling just gets
you into more trouble. And now you are trying to position things by padding
and and it just gets all tangled.

OK, slow down. You know how to table. We used to call it "tabling it out" in
the HTML4x days. These days we call it "blocking it out". So you are on the
right track to start. You see a composition, your mind opens a table, a
master table and every compositional element, you open a table within that
master. No big deal. Now just see them as "block level elements" which
means all those nested tables are now called blocks. So the header is a
block, the menu is a block, the content is a block, the footer is a block.
Same visual process of "cutting up". So with CSS, we just mentally cut it
up and open a block for every compositional element in HTML in a div.

div id="header">hi, this is the header</div
div id="menu>Hi here is the menu</div
div id="content">Hi here is all your content</div
div id="footer">and here is your footer</div

Don't worry about id selectors or class selectors for now, stay simple.

Now that you have your compositional elements identified, you can position
them anywhere you want with CSS. And one of the best ways to start is to
position them with MARGINS or ABSOLUTE, not padding, not EMs. Because we
almost always want to fit the page into whatever resolution the client
wants. If their clients are rich, you probably want to build for 1024
width. If the clients are poor, you might drop back as far as 800. And so
we set the page up with a static pixel width most of the time.

Having said that, it's really neat to position things in absolute, but
everybody gets confused on the nomenclature. It makes sense to nail down
one element absolutely and position everything relative to that element. In
CSS however, it's kind of backwards. Whatever element you call "relative"
is now fixed in position on page, and every element you want to position
off that is positioned as absolute. Think of it like "this element is
absolutely positioned, relative to the element I declared as it's
relative". It's not the truth but it's more descriptive. And z-index just
becomes an unused trick in the bag.

Why tell you all this? Especially when I'm just telling what what "what's
his name" said in his immortal "colored blocks" tutorial? Because margin
positioning was better understood at that time. When I did this, I was
fascinated by our new-found capability of absolutes. Just sounds better to
me. I believe in absolute truth. I belive in absolute love and absolute
devotion. But that's just me.

So you can literally watch me as I got a grip on it in the following:

http://www.dataspheric.com/dev/trevo...yout_in_contai...

You can do the exact same thing with margins.

Notice how I "blocked" things out with the styles inline? Notice how I
margined the styles? Just helps you visually see the elements until we
break out the style sheet.

Notice how we assign height values to the blocks before content actually
goes in? When content goes in, we might stipr the height values and let
content flow. Or we might use the great Grey Wyvern's "jack" method.

Now for box-model hacks, we can increase padding or margins. See what we
did? We saved the margin/padding tricks for last.

OK, LET'S TIE IT TOGETHER.

I could have declared my body div in margin terms. If my header was 100px
long, I would have positioned my content to be

#content {top: 100px;}

Now just one more thing, when I use absolute, I usually open a "content"
or "body" div tag, and nest everyting in that because the first opening tag
usually is defined by the browser as starting from the top right and
flowing down left.

I hope that helps. And if there are any mistakes in here, I don't want to
hear about it. If anyone thinks they can one-up me, I don't care. This
simple technique will work for you.

And especially if some person known as 1001 Webs even talks to me,

Hallo Spheric !!!
How're you doing, mate?

Just one thing:
Only a fool would believe in absolute Love and absolute Devotion and
for extension, in absolute positioning.
There's a song by Frank Zappa called "Broken Hearts are for Assholes"
that in my opinion defines you quite well.

I tend to distrust people who claim to believe in such non-existing
values, such as you do.
I've found out that they are usually the kind that say one thing, but
when under pressure, do exactly the opposite.
Just like you are, because had you not wished to communicate to me,
you'd had abstained from even mentioning me.

But you came back on Sunday for the gong show ...

"Some of you might not agree
cause you probably likes a lot of misery
But think a while and you will see...
Broken hearts are for assholes
Broken hearts are for assholes
Are you an asshole?
Broken hearts are for assholes
Are you an asshole too?
Whatcha gonna do, cause you're an asshole ..."

Spheric,

I appreciate your detailed reply. The pages you referenced were quite
interesting. However, everything uses absolute positions and sizes.

I want to have a main content div that expands to fit the screen width
on the left and a fixed-width div on the right, with a full-width
footer div below them. I want to have something centered at the
bottom of my header div. http://franklloydwright.tercenim.com/index1.htm
is what I want to achieve, but that still uses tables.

- Mark