Previous Message
Next Message

Re: [css-d] Overlapping positioned <divs> problem (solved)<| On 2002/05/30, Andrew Clover said: > Andy Warwick <mailing.lists@creed.co.uk> wrote: > > > As you can see, when the content text runs shorter than my sidebar, the > > footer is pulled up and

Sent by Andy Warwick on 30 May 2002 18:06


| On 2002/05/30, Andrew Clover said: 

> Andy Warwick [EMAIL-REMOVED]> wrote:
> 
> > As you can see, when the content text runs shorter than my sidebar, the
> > footer is pulled up and tucks behind the sidebar; any suggestions how I
> > force the footer down so it runs below the longer of the two <div>'s -
> > content or sidebar
> 
> An element that is absolutely positioned cannot affect the positioning of
> any other element, so you'd have to change that, for example by using a
> right-float for the sidebar with a 'clear: right' on the footer (though
> that could perhaps cause other problems).

Andrew

Thank you for that; that got me on the right track. The insight that absolute
positioning takes the <div> out of the document flow provided the insight. You
can see my solution at:

    <http://development.creed.co.uk/greenkeeper_solution.htm>
    
Basically I re-ordered the document, so that the sidebar came first, then
floated it right.

That means the order of content is not ideal when CSS is off, so I added a 'skip
to content' link for those text browsers out there. Not too bad a compromise.

> Since the height of the sidebar is fixed there are a few other
> possibilities. 

Sadly the sidebar height isn't fixed (it changes by page) so I can't use your
second suggestion.

> You could put a floating element of the same height inside
> the content div with a clearing div at the bottom, or set min-height on
> the content div. (Unfortunately min-height doesn't work on IE, without
> the scripting hack on my site anyway.)

Interested in the hack you are referring to there... (for future ref.)
 
> > While you're there, if you can see if the layout breaks in any browsers
> 
> Well, you'll probably not be too surprised to know N4 makes a bit of a
> hash of it...

:)

Eventually I'll use the import hack to stop NN loading the CSS, and see if I can
do a simple styling file for it, without bothering about positioning.

> Opera did notice that your server is trying to set an invalid cookie.
> (It's passing a domain of 'SITE_NAME', oops.)

:)

That's why it's on my development server, 'cos it does wierd things like that
when I'm not looking; thanks for the heads-up.

| While on 2002/05/30, Paul Beakley said: 

> Since you're already using absolute positioning, why not absolutely 
> position the footer with a bottom: 0 or somesuch? If you place the footer 
> <div> inside the content <div>, it'll still be otherwise constrained to the 
> size of the container...it'll just be forced to the bottom of the page each 
> time (I think).

Paul

I eventually went with Andrew's solution (above), but appreciate the help
anyway. I tried your suggestion, but the footer was still doing some wierd
overlapping and remained tucked behind the sidebar. I guess 'cos the sidebar was
out of the document flow altogther.

If anyone is interested, the original site I am re-doing is at:

    <http://development.creed.co.uk/greenkeeper_solution.htm>
    
Which has serious accessibility issues. (It was done when I was a lot less
experienced...)

Re-doing/updating that layout in CSS has proved to be a real challenge :)

> Groovy in IE6Win

Hope that is still the case, post fix :)
 
Thanks people.

Andy W
Previous Message
Next Message

Message thread: