Hi

I'm coding a page which has the following layout.

<div id="header">
header
</div>
<div id="navigation">
navigation
</div>
<div id="content">
<div id="column one ">column one</div>
<div id="column two">column two</div>
<div id="column three ">column three</div>
</div>

The issue arises because the header of the site needs to grow and contract
with the content in it, so I can't give column's one two and three absolute
positions because these change with the height of the header, I have tried
giving each a relative position with a negative top value, which positions
everything in the right place and the content moves up and down with the
header, but this results on a lot of extra white space at the bottom of the
page.

If anyone has got any solution, ideas I would be indebted.

Cheers Jeff

Jeff Butler wrote:
[color=blue]
> The issue arises because the header of the site needs to grow and contract
> with the content in it, so I can't give column's one two and three
> absolute positions because these change with the height of the header[/color]

Put them inside a container in normal flow (i.e. so it sits after the
header) and position them inside that (i.e. by utting position: relative on
the container).

--
David Dorward http://dorward.me.uk/

On Wed, 8 Oct 2003 14:12:53 +1300, "Jeff Butler" <jeffis@itagain.co.nz>
wrote:
[color=blue]
>The issue arises because the header of the site needs to grow and contract
>with the content in it, so I can't give column's one two and three absolute
>positions because these change with the height of the header, I have tried
>giving each a relative position with a negative top value, which positions
>everything in the right place and the content moves up and down with the
>header, but this results on a lot of extra white space at the bottom of the
>page.
>
>If anyone has got any solution, ideas I would be indebted.[/color]

Use floats. I have a couple of example layouts on my site (see sig) that
might offer some inspiration.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Hey Stephen,

Thanks for your help, that worked perfectly.

Cheers Jeff


"Stephen Poley" <sbpoleySpicedHamTrap@xs4all.nl> wrote in message
news:bgi7ov0v8hd6jvhbkpnhuhip80nbjjcvdm@4ax.com...[color=blue]
> On Wed, 8 Oct 2003 14:12:53 +1300, "Jeff Butler" <jeffis@itagain.co.nz>
> wrote:
>[color=green]
> >The issue arises because the header of the site needs to grow and[/color][/color]
contract[color=blue][color=green]
> >with the content in it, so I can't give column's one two and three[/color][/color]
absolute[color=blue][color=green]
> >positions because these change with the height of the header, I have[/color][/color]
tried[color=blue][color=green]
> >giving each a relative position with a negative top value, which[/color][/color]
positions[color=blue][color=green]
> >everything in the right place and the content moves up and down with the
> >header, but this results on a lot of extra white space at the bottom of[/color][/color]
the[color=blue][color=green]
> >page.
> >
> >If anyone has got any solution, ideas I would be indebted.[/color]
>
> Use floats. I have a couple of example layouts on my site (see sig) that
> might offer some inspiration.
>
> --
> Stephen Poley
>
> http://www.xs4all.nl/~sbpoley/webmatters/[/color]