Keeping left-hand and right-hand 'columns' in step.

[jake]

Maybe some kind person can help with a suggestion or two ;-)

I want to construct a banner on a number of pages in the format:

LHS: Text (variable content) RHS. Logo
..... each with a different background colour.

The following test page shows what I'm trying to achieve (borders put in
for diagnostic purposes).

http://www.gododdin.demon.co.uk/ng/testpage2.htm

It seems to work OK in IE6/Opera/Mozilla/Netscape -- except for one
thing.

When I adjust the size of the text to make it larger than 'normal', the
left-hand container expands downwards, to accommodate the additional
vertical space needed -- but what I need is a mechanism for locking the
right-hand container to that expansion in order to maintain the layout.
At the moment the RHS doesn't expand.

Any ideas how I might achieve this?

Thanks
--
Jake

[Markus Ernst]

"jake" <ja**@gododdin.demon.co.uk> schrieb im Newsbeitrag
news:oj**************@gododdin.demon.co.uk...

Maybe some kind person can help with a suggestion or two ;-)

I want to construct a banner on a number of pages in the format:

LHS: Text (variable content) RHS. Logo
.... each with a different background colour.

The following test page shows what I'm trying to achieve (borders put in
for diagnostic purposes).

http://www.gododdin.demon.co.uk/ng/testpage2.htm

It seems to work OK in IE6/Opera/Mozilla/Netscape -- except for one
thing.

When I adjust the size of the text to make it larger than 'normal', the
left-hand container expands downwards, to accommodate the additional
vertical space needed -- but what I need is a mechanism for locking the
right-hand container to that expansion in order to maintain the layout.
At the moment the RHS doesn't expand.

Any ideas how I might achieve this?

I think you need a HTML table to do that.

--
Markus

[Brian]

jake wrote:

LHS: Text (variable content) RHS. Logo
.... each with a different background colour.

http://www.gododdin.demon.co.uk/ng/testpage2.htm

When I adjust the size of the text to make it larger than 'normal', the
left-hand container expands downwards, to accommodate the additional
vertical space needed -- but what I need is a mechanism for locking the
right-hand container to that expansion in order to maintain the layout.
At the moment the RHS doesn't expand.

I have not the time to test these ideas myself, but judging from the
page, you are certainly capable of executing these ideas and seeing if
it works.

1. display: table-cell (afaik, this only works in Opera)

2. assign height in em or ex to containing div; assign height of inner
divs to 100%

3. put a margin on the containing div and make bgcolor brown; use blue
bgcolor for h1 inside that containing div; positiong logo absolutely
I think this has been asked before, in the context of column layout
using css. Perhaps searching Google/ciwas will help?

--
Brian
follow the directions in my address to email me

[jake]

In message <3mVKb.85259$xX.597221@attbi_s02>, Brian
<us*****@julietremblay.com.invalid-remove-this-part> writes

jake wrote:

LHS: Text (variable content) RHS. Logo
.... each with a different background colour.
http://www.gododdin.demon.co.uk/ng/testpage2.htm
When I adjust the size of the text to make it larger than 'normal',
the left-hand container expands downwards, to accommodate the
additional vertical space needed -- but what I need is a mechanism
for locking the right-hand container to that expansion in order to
maintain the layout. At the moment the RHS doesn't expand.

I have not the time to test these ideas myself, but judging from the
page, you are certainly capable of executing these ideas and seeing if
it works.

1. display: table-cell (afaik, this only works in Opera)

2. assign height in em or ex to containing div; assign height of inner
divs to 100%

3. put a margin on the containing div and make bgcolor brown; use blue
bgcolor for h1 inside that containing div; positiong logo absolutely
I think this has been asked before, in the context of column layout
using css. Perhaps searching Google/ciwas will help?

Thanks for that.

I tried (2) and that seemed to work in IE, but not the others. So I set
the height on all 3 divs to 100% and that worked on all 4 browsers. As
the text is expanded, so both leftside and rightside divs stay in sync
:-)

http://www.gododdin.demon.co.uk/ng/testpage3.htm

However, the approach breaks down when I try and make the text smaller
as when the 'leftside' div shrinks, it shows the background.

So -- I swapped the background colour of the container div from the
rightside div (brown) to the leftside div (green).

That works OK for text that's set smaller, but not text that's set
bigger.

So, I've now got a solution for when making text either bigger or
smaller -- but not both :-(

I have the feeling that there's a solution around here somewhere ...

I'll have a look around Google/ciwas and see what turns up.
regards
--
Jake

[jake]

In message <3f*********************@news.easynet.ch>, Markus Ernst
<derernst@NO#SP#AMgmx.ch> writes

"jake" <ja**@gododdin.demon.co.uk> schrieb im Newsbeitrag
news:oj**************@gododdin.demon.co.uk...

Maybe some kind person can help with a suggestion or two ;-)

I want to construct a banner on a number of pages in the format:

LHS: Text (variable content) RHS. Logo
.... each with a different background colour.

The following test page shows what I'm trying to achieve (borders put in
for diagnostic purposes).

http://www.gododdin.demon.co.uk/ng/testpage2.htm

It seems to work OK in IE6/Opera/Mozilla/Netscape -- except for one
thing.

When I adjust the size of the text to make it larger than 'normal', the
left-hand container expands downwards, to accommodate the additional
vertical space needed -- but what I need is a mechanism for locking the
right-hand container to that expansion in order to maintain the layout.
At the moment the RHS doesn't expand.

Any ideas how I might achieve this?

I think you need a HTML table to do that.

Yes, that's one way of doing it.

I could also just create the text as a graphic -- so that it can't be
resized.

regards.
--
Jake