Am trying to resolve a deficiency in my understanding of positioning in general
Taking this model (very simplified)
------------------------------
| |
------------------------------
----- -----------------------
| | | |
| | | |
| | | |
| | | |
| | | |
----- -----------------------
------------------------------
| |
------------------------------
The boxes are header,sidebar,main and footer
In a static html page using absolute positioning defining top,left, height and
width is easy to do and make pixel-kinda-perfect, even with a complex design.
BUT, with a website with dynamic content (and not using scrollbars in the divs)
you run the risk of div#main pushing down over d#footer if you use absolute
positioning. How would you go about using relative positioning such that if
main (using min-height) overflows the min-height that footer gets pushed down
if the html code does not match the presentation structure.
In general I understand absolute and relative, and how it interacts with the
html structure, but what happens if the structure is not ordered the same as
the visual presentation? How do you mix absolute and relative such that it is
not explicitly tied to the html defined structure? Is this possible? What I
am trying to do is design a "managed content system" whose presentation be
manipulated like the samples on CSSZenGarden. If I can define the structure of
the document correctly, I can hire real designers (I am not one), give them
ZenGarden and an explanation of the document structure and end up with many
different layouts without my having to change html code. I have it for the
most part, but am having trouble when text overflows boundaries and want to
avoid scroll bars in divs as much as possible. The design I am working with is
much much more complicated than the example, but the example reflects the
problem. I would rather the elements below get "pushed" down when the ones
above overflow, but I also want to put the content of the site first in the html
code for better SEO capability.
(sample CSS - not pixel perfect)
Div#header {position:absolute;top:10;left:10;height:25;width:700;}
Div#sidebar {position:absolute;top:40;left:10;height:250;width:100;}
Div#main {position:absolute;top:40;left:110;height:250;width:590;}
Div#footer {position:absolute;top:290;left:10;height:25;width:700;}
Sample code mimicking presentation structure
<div id=header></div>
<div id=sidebar></div>
<div id=main></div>
<div id=footer></div>
What happens if you change to this and keep the layout above?
Sample code deviating from presentation structure.
<div id=main></div>
<div id=header></div>
<div id=sidebar></div>
<div id=footer></div>
Mike G
Live as if you were to die tomorrow. Learn as if you were to live forever.
-Gandhi
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
