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 :
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 </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:
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With