Forum Moderators: not2easy
On a page I want to DISPLAY:
DIV--MENU (may be varying height)
DIV--FLASH IMAGE ROTATOR (fixed height OK)
DIV--LOTS OF TEXT (may be varying height)
OTHER STUFF (may be varying height)
But in the code I want to order it
DIV--MENU (may be varying height)
DIV--LOTS OF TEXT (may be varying height)
DIV--FLASH IMAGE ROTATOR (fixed height OK)
OTHER STUFF (may be varying height)
Can anyone give me pointers on this?
Thanks!
Chris
Are all the containers the same width?
My first thought was to use relative positioning but the flexible height of 'lots of text' would make that impossible, as you'd need to know it's height. You could use Javascript to calculate the height of 'lots of text' and apply inline styles to the 'flash image rotator' with Z-index and floats, but it wouldn't be ideal.
Out of interest, what is the reason why? Getting the content up to the top for SE's?
So what method are you using to display your Flash? The SWFobject method is very low key. One .js file and minimal html.
None of that re-solves the first goal, mind you. I'll do some digging about, as I'm sure there's a cross-browser method out there for content positioning with flexible spacing...
[Edited for brevity]
[edited by: limbo at 2:56 pm (utc) on Jan. 6, 2010]
Using position:fixed and setting the distance from the top of the page seems to do the trick for the flash box (with a fixed height).
A bit like this (excuse the quick and dirty inline styles):
<body style="width:800px;margin:0 auto;">
<div style="width:800px; background:#eee; height:50px;float:right">header</div>
<div style="width:800px; background:#ccc;position:fixed;top:150px;">
<div>Content</div>
<div style="width:800px; background:#bbb;">Other Stuff</div>
<div style="width:800px; background:#aaa;">Footer</div>
</div><!-- end of div containing all elements apart from flash -->
<div style="width:800px; background:#ddd; height:100px;position:fixed;top:50px;">Flash</div>
</body>
Not got IE6 here today - It'll probably need conditionals.
However - this method relies on header being fixed height too... The variables in height for content and header are the issue, anything following content is not as you can simply place it inside the same container as main content.
[edited by: limbo at 2:58 pm (utc) on Jan. 6, 2010]
