Floating Text (div) causing problems 1

[Stretchwickster]

Hi there,

I've come up with a design in Fireworks which I've tried to implement in XHTML & CSS.

Basically there are two divs which contain "floating text". These elements have IDs of floating_text1 and floating_text2. I've set floating_text1 to have an absolute position on the right-side of the page and have been trying to get floating_text2 to sit on the bottom of/or just below the purple navigation bar on the left side.

I'm having real difficulties with this and have been trying different things to achieve my aim. I thought I'd managed to sort it out by setting its' position as relative and its z-index to 1 (so that it overlays the navigation bar). This works ok in IE but in FF it screws up my "Contact Us" page because, for some reason, it has a large background which sits over the form elements due to the z-index. I have given the two floating text divs a pink background-color just to highlight the problem.

The offending page can be viewed here: contact.htm
And the CSS can be found here: styles.css

By the way, I have only implemented Home, The Teacher and Contact Us pages. Home and The Teacher pages behave in a desirable way but I think this is only because there is a lot more text on each of those pages, so it pushes floating_text2 further down the page away from the navigation bar.

Does anyone know what is causing this and how to rectify it so that it behaves consistently in both browsers?

I've tried removing floating_text2 completely, but then the page height then does strange things.

Any help would be very much appreciated!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[Vragabond]

You're right about the content. When there is enough content in the div#content, you get your expected results. Because everything else is absolutely positioned, which does not attribute to the height of the parent container. I suggest you rewrite your code to use floats instead of absolute positioning or enforce a minimum height on the element.

 

[Stretchwickster]

Just to clarify, when you say "...rewrite your code to use floats instead of absolute positioning...", are you saying I should change any "position" attributes from absolute to relative then?

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[Vragabond]

You do not need any positioning for floated elements. You would need positions only if you require it for reference points with the other elements that you might use absolute positioning on. You should look into float property.

 

[Stretchwickster]

Thanks for the advice Vragabond. I'm sure I tried min-height but I think I applied it to the body, which didn't seem to have any affect at the time. Now, I've applied it to div#content and it does the job nicely.

Thanks for the positioning advice - I'm just getting to grips with CSS positioning.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096