Maëlle Jumel Maëlle Jumel -4 years ago 72
CSS Question

Set an img's top-margin dependant to another div's height

So I have this question/answer looking html and there's an img on each side of two speechbubbles. I would like for the second img to be aligned with the second speechbubble and therefore for its top-margin to increase or decrease according to the height inside the first speechbubble.
Here's my code:



.question{
width:100%;
height:auto;
line-height:20px;
color:{color:Answer};
}

.questionin {
position: relative;
width: 415px;
min-height: 25px;
padding: 5px;
margin-left:55px;
padding-left:10px;
padding-right:10px;
background: #D8D8D8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
}

.questionin:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #D8D8D8;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 7px;
}

.askavatar {
width:30px;
padding:3px;
margin-right:4px;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
-o-transition:.3s ease;
transition:.3s ease;
}

.askavatar:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}

#questionavatar {
position: absolute;
top: 0;
left: -55px;
}

#answeravatar {
position: absolute;
top: 0;
right: -55px;
}

.answer {
position: relative;
margin-top:10px;
width: 425px;
min-height: 30px;
padding: 5px;
background: #97c5e0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
-moz-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
}

.answer::after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 15px;
border-color: transparent #97c5e0;
display: block;
width: 0;
z-index: 1;
right: -14px;
top: 7px;
}

<div class="question">
<img src="{AskerPortraitURL-48}"
align="left"id="questionavatar" class="askavatar"><img src="{image:Avatar}" align="right" id="answeravatar" class="askavatar"></div>
<div class="questionin">
This is a question : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="answer">
This is an answer : Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>





It's normal that the second img is a bit off to the right becayse my original width is 435 and the snippet is not. I tried with percentages but It didn't work with a longer text. Do you know how to do this? Thanks!

Answer Source

With your current html structure, it's almost impossible to achieve what you are looking for. I have slightly changed your html and css, see code snippet

.questionin {    
    position: relative;
    width: 415px;
    min-height: 25px;  
    padding: 5px;
    margin-left:55px;
    padding-left:10px;
    padding-right:10px;
    background: #D8D8D8;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
}

.questionin:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #D8D8D8;
    display: block;
    width: 0;
    z-index: 1;
    left: -15px;
    top: 7px;
}

.avatar {
  width:30px;
  padding:3px;
  margin-right:4px;
  -webkit-transition:.3s ease;
  -moz-transition:.3s ease;
  -o-transition:.3s ease;
  transition:.3s ease;
}

.avatar:hover {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

#questionavatar {
  position: absolute;
  top: 0;
  left: -55px;
}

#answeravatar {
  position: absolute;
  top: 0;
  right: -55px;
}

.answer {
    position: relative;
    margin-top:10px;
    width: 425px;
    min-height: 30px;
    padding: 5px;
    background: #97c5e0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
    -moz-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
    box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.30);
}

.answer::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 0 10px 15px;
    border-color: transparent #97c5e0;
    display: block;
    width: 0;
    z-index: 1;
    right: -14px;
    top: 7px;
}
<!--
  YOU DO NOT NEED THIS TAG
<div class="question">
</div>
-->
<div class="questionin">
<img src="{AskerPortraitURL-48}"
align="left"id="questionavatar" class="askavatar">
This is a question : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="answer">
<img src="{image:Avatar}" align="right" id="answeravatar" class="askavatar">
This is an answer : Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>

Updated: Your avatars are visible now

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download