More positioning questions...

[Andrew Jones]

Hi,
I have made another simple page at http://tinyurl.com/hgaa - the CSS is
at http://tinyurl.com/h8cc

And I have a couple more questions that I hope somebody can help me with...

- How should I position the right bar with its top edge at the top of
the page and its left edge 2px from the right edge of the left bar,
without absolute positioning, and with both of the bars' widths changing
according to the font size? Can this even be done?

- Should both sections be seperate in the HTML, like they are in my
page, for example:
<div id="one">Sectio n one</div>
<div id="two">Sectio n two</div>

- How do I get both of the bars' heights to stay the same as each other?
That is, for example, if the left bar has twice as much text as it does
at the moment, the right bar will extend its height to be the same as
the left's?

Thanks for any help.

I know I'm asking a lot of questions, but I'm only trying to get it
right before I put it to use in a real page. If I hadn't asked any
questions, I'd be positioning *everything* absolutely, and trying to get
my pages to look *exactly* the same in every browser! :)
--
Andrew Jones
[please remove 'spluc.' from my
email address to contact me]

[Lauri Raittila]

In article <bf**********@h ercules.btinter net.com>, Andrew Jones wrote:

Hi,
I have made another simple page at http://tinyurl.com/hgaa - the CSS is
at http://tinyurl.com/h8cc
Please use real url, when it's longer than 80 chars, and when it is
longer, make it shorter. Tinyurl is good for multiline URL, but you don't
need it for your own urls, as your own urls are sencible and short.
And I have a couple more questions that I hope somebody can help me with...

- How should I position the right bar with its top edge at the top of
the page and its left edge 2px from the right edge of the left bar,
without absolute positioning, and with both of the bars' widths changing
according to the font size? Can this even be done?
#left {display:table; width:100%;}
#right {display:table-cell;border-left:2px solid white;}

Works on Opera 7.2b1. Or maybe you meaned something else.
- Should both sections be seperate in the HTML, like they are in my
page, for example:
<div id="one">Sectio n one</div>
<div id="two">Sectio n two</div>
No, your example has them nested (unless you changed it). This way you
propose is better, since it works on IE.

Other way as first:
div {float:left;mar gin-right:2px;}

(it is also possible to make it look like first, even with IE.)
- How do I get both of the bars' heights to stay the same as each other?
But them in container, use display:table etc. Many times all you need is
to make sure it looks like the boxes are as high.
Thanks for any help.

I know I'm asking a lot of questions, but I'm only trying to get it
right before I put it to use in a real page. If I hadn't asked any
questions, I'd be positioning *everything* absolutely, and trying to get
my pages to look *exactly* the same in every browser! :)

The fun thing with CSS is that you can mark up your real content before
you need to even think about layout. Do that, and ask more.

--
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.