A fairly common technique to achieve page layouts is to wrap absolutely positioned divs inside a relatively positioned one in order to make the absolute divs "relatively absolute. No issues thus far. However, as I have just discovered, this causes problems with placing what follows the relatively positioned div - unless I give the relative div a height.
I have used relative absolutes for quite some time now and always thought of them as being a fully legit CSS3 technique but I am now starting to wonder if it isn't too hacky after all. If that is the case what would be the legit way to position divs absolutely relative to a container and yet have document content following the container to flow properly (i.e. appear below the container?)
I should mention that the context here is modern browsers - ones that have no issues with CSS3 & HTML5. If there is a solution that works I would love to hear of it.
An edit appears in order here. Here is the offending markup
<div id='boxrel' style='position:relative'>
<div style='position:absolute;height:100%'>
<div id="boxscroll">
Lorem ipsum ...
</div>
</div>
</div>
<div id='afterbox'>
This div, id = afterbox, should appear BELOW boxrel but does not
</div>
The full context here is this
- I am using jQuery Mobile v 1.3 + jQuery v 1.8.2 (good reasons for not going to v 1.9)
- I am experimenting with using nicescroll which I have found to be a neatly written jQuery plugin for creating scrolling content.
- In order to make nicescroll work I need to place the scrollable content inside an absolutely positioned div.
- And that in turn requires me to make that div relatively absolute or else...
- The consequence though is that afterbox appears as though boxrel did not exist.
- The only way to fix this is to give boxrel a height but I am not in a position to do that
I hope that makes the question clearer.