Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Position div under absolute picture with dynamic height

Tags:

css

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 :

  1. .belowPicture
  2. .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: image of the goal

like image 679
Anders Metnik Avatar asked Jan 28 '14 12:01

Anders Metnik


1 Answers

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/

like image 142
Sinister Beard Avatar answered Oct 05 '22 02:10

Sinister Beard