CODEWITHSUNDEEP
css
Anders Metnik
Anders Metnik

Reputation: 6237

Position div under absolute picture with dynamic height

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

Upvotes: 5

Views: 14701

Answers (1)

Sinister Beard
Sinister Beard

Reputation: 3680

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/

Upvotes: 5

Related Questions