467,864 Members | 1,911 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,864 developers. It's quick & easy.

More positioning questions...

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">Section one</div>
<div id="two">Section 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]

Jul 20 '05 #1
  • viewed: 1650
Share:
1 Reply
In article <bf**********@hercules.btinternet.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">Section one</div>
<div id="two">Section 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;margin-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.

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Bryan R. Meyer | last post: by
2 posts views Thread by Sailor Foley | last post: by
reply views Thread by chris ciotti | last post: by
8 posts views Thread by Christopher Benson-Manica | last post: by
1 post views Thread by Charles Harrison Caudill | last post: by
6 posts views Thread by | last post: by
2 posts views Thread by Michi | last post: by
6 posts views Thread by Mark | last post: by
reply views Thread by jack112 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.