Email conversation
| From | Mark Whitton |
|---|
| To | Me |
|---|
| Subject | div inline positioning problem |
|---|
| Date | 17 June 2004 12:08 |
|---|
Hi,
I am perplexed by the way in which inline DIV's are being displayed. I am
designing a dynamic content site and have the following structure:-
<div class="MainContainer">
<div class="LeftArea"></div>
<div class="DataContainer"></div>
<div class="RightArea"></div>
</div>
LeftArea, DataContainer and RightArea are inline DIVs within MainContainer
and are relatively positioned and sized (see below for CSS). I do not know
how much space any container is going to consume as the data is
programmatically set and therefore do not set heights to fixed values. What
I would like is for all inline DIVs to size to the maximum inline DIV size.
Unfortunately what I would like is not happening and I get the three inline
containers never being positioned relative to the parent div or all sizing
to the same height, no matter how I configure the style.
One of your articles on DIV and CSS positioning states that an absolutely
positioned DIV within a relatively positioned DIV is positioned relative
to the parent DIV . Unfortunately in IE5.5 I do not get that happening and
the DIV is simply positioned from the top-left of the browser.
Below is the CSS I use.
I'd very much appreciate any help or advice you could offer
Many Thanks
Mark Whitton
[a whole load of CSS]
| From | Me |
|---|
| To | Mark Whitton |
|---|
| Subject | Re: div inline positioning problem |
|---|
| Date | 17 June 2004 13:33 |
|---|
Mark,
You have hit on one of the main limitations of CSS positioning. You cannot
make one div resize to the same height as another, unless the heights are
explicitly set. This is actually in the CSS spec, that if a div has
height: auto; or defaults to this value, heights that relate to it are
ignored. There is nothing you can do to change this behaviour.
One of the few places where tables are still better than CSS.
However, some people have managed to make 3 columns layouts that work:
http://www.pixy.cz/blogg/clanky/css-3col-layout/
http://accessat.c-net.us/test/template-3col.html
I have never tried using any of these, so I am not sure how difficult they
are to implement.
hope you manage to find something useful in all of that.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Mark Whitton |
|---|
| To | Me |
|---|
| Subject | Re: div inline positioning problem |
|---|
| Date | 17 June 2004 13:47 |
|---|
Mark, many thanks for the links and taking the time to let me know.
Regards
Mark Whitton