Position div under absolute picture with dynamic height

css

Solution

You can mix `relative` and `absolute` positioning in as much as you can absolutely position an element with a relativity position element, but you can't do what you're asking with `absolute` positioning, because as soon as an element's position is affected by the position of another, that's `relative` positioning.

EDIT: You can achieve what you're after using `float` and `clear`: http://jsfiddle.net/nDvYv/1/

Problem

My problem is positioning a div under a "dynamic picture" and having dynamic content under the div positioned under the dynamic picture: Link to the jsfiddle jsfiddle css classes ready to be filled in : - .belowPicture - .belowBelowPicture HTML: ``` <div id="wallDetailContent"> <section id="wallDetailMessage" style="width 100%"> <img class="wallDetailPicture" src="http://web.scott.k12.va.us/martha2/dmbtest.gif"> <div style="max-width:70%;">blah gik sig en tur, og købte blah med hjem</div> </section> <section class="belowPicture"> <p class="wallByDate"> 20140126220550</p> <p class="wallByBy"> af &nbsp; </p> <p class="wallByName"> Anders </p> </section> <section class="belowBelowPicture"> content (should be dynamic, able to fill all the height it need downwards.) </section> </div> ``` css: ``` .wallDetailPicture{ top: 5px; right : 5px; position: absolute; display:box; width:auto; height:auto; max-width:30%; max-height: 200px; } .wallByName{ font-weight: bold !important; color: blue; display:inline-block !important; } .wallByDate{ font-weight: bold !important; display:inline-block !important; } .wallByBy{ display:inline-block !important; } .belowPicture{ background:red; } .belowBelowPicture{ background:green; } ``` Goal look:

Original source