Re[2]: Using CSS to replace tables for positioning

by Anton Tagunov <tae(at)newmail.ru>

 Date:  Wed, 20 Mar 2002 16:43:56 +0300
 To:  Andrew McFarland <aamcf(at)aamcf.co.uk>
 Cc:  hwg-techniques(at)hwg.org
 References:  ntlworld
  todo: View Thread, Original
Hello Richard!

YES!YES!YES! Me too! I also want to get rid of the tables
as formatting facilities!!

I have been playing around with CSS positioning.
If my memory serves me right this is the best
I could have achieved

#body{
   padding: 100px 140px 100px 80px
}

#logo{    position: absolute; ...}
#navy{    position: absolute; ...}
#wannado{ position: absolute; ...}

that is I "glued" #logo, #navi and #wannado
to the viewport via absolute positioning
over #body and
have provided appropriate padding for the #body.

This way I was even able to scroll #body.

I my memory serves me right,
- I had to use padding a bit wider then my #navi,#log,#wannado
- it did not behave equally well with IE5.5 and NS6.21
  (with one of them I had scrolling with other not, or
  something like that)

How much does it solve your task?
How good is the IE5.0/5.5/6.0 vs NS6.02 interoperability
of your page?
What do you mean by
"follow the #body but to cover the full width of the screen"?
I understand it if body is smaller then the screen, but if it
is larger? how much space should be devoted to #wannado?

If you mean to have 'more if there's space left' and 'exactly
what I tell' if there isn't and we need scrolling, I doubt
that CSS 2.0 is able to express such a request..

My best regards, and I surely would like to hear how you're
getting on both with my and with
Andrew McFarland <aamcf(at)aamcf.co.uk>'s
proposals, I'm very,very,very interested in nuking frames
as a formatting facility!! :-)

RL> I'm developing a page using CSS instead of tables for positioning. I have
RL> four DIVs ... three that stay were I want them:
RL> +----------------------------------------------------------+
RL> |                 #logo                                    |
RL> +----------------------------------------------------------+
RL> +----------------------------------------------------------+
RL> |                                        |                 |
RL> |                                        |                 |
RL> |     #body                              |   #navi         |
RL> |                                        |                 |
RL> |                                        +-----------------+
RL> |                                        |
RL> |                                        |
RL> +----------------------------------------+
RL> +----------------------------------------------------------+
RL> |               wanna do                                   |
RL> +----------------------------------------------------------+

RL> #logo {
RL>           height : 100px;
RL>           text-align : center
RL> }
RL> #body {
RL>           background : transparent;
RL>           position: absolute; right: 140px; top: 100px;
RL>           padding : 0px, 0px;
RL>           margin : 0px;
RL>           width : auto;
RL>           text-align : left;
RL> }
RL> #navi {
RL>           position: absolute; right: 20px; top: 100px;
RL> }

RL> Could some one tell me how I can get the "wanna do" to occur, the #body is
RL> variable length enclosing whatever text it contains. I want the "wanna do"
RL> to always follow the #body but to cover the full width of the screen.

- Anton

P.S. Are you really from the New Zealand? :-)) How is it there, must
be autumn? Do you really have that much nature around? The greenery
and parrots?

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA