CODEWITHSUNDEEP
htmlcss
spice
spice

Reputation: 1512

Absolute div height being cut off inside relative div

I'm having trouble getting one of my absolutely positioned divs to display correctly. It's getting cut off unless I set a height for the parent (relative) div which I can't do as I will never know the height required.

I originally wasn't using any absolute positioning but the contents of the comm div were wrapping underneath the avatar div so I thought absolute positioning would fix it and it has, apart from the text being cut off at the bottom.

This is the structure and you can see what's happening in this fiddle.

body {
  background: #212121;
  font-family: arial;
}

.main {
  width: 80%;
  margin: 20px auto;
}

.wrap {
  width: 100%;
  background: white;
  padding: 10px;
  overflow: hidden;
  position: relative;
}

a.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  float: left;
  margin-right: 10px;
  position: relative;
}

a.avatar img {
  width: 100%;
}

.top {
  display: block;
  overflow: hidden;
  position: absolute;
  left: 70px;
}

a.name {
  font-weight: bold;
  margin-right: 10px;
  float: left;
}

.posted {
  color: #BBB;
  font-size: 12px;
  padding-top: 3px;
  float: left;
}

p.comm {
  display: block;
  position: absolute;
  left: 70px;
  top: 20px;
  height: 100%;
}
<div class="main">
  <div class="wrap">
    <a href="https://example.com" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /></a>
    <div class="top">
      <a href="https://example.com" class="name">John Doe</a>
      <div class="posted">8 mins ago</div>
    </div>
    <p class="comm">Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="wrap">
    <a href="https://example.com" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /></a>
    <div class="top">
      <a href="https://example.com" class="name">Jane Doe</a>
      <div class="posted">11 mins ago</div>
    </div>
    <p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
  <div class="wrap">
    <a href="https://example.com" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /></a>
    <div class="top">
      <a href="https://example.com" class="name">Jimmy Doe</a>
      <div class="posted">18 mins ago</div>
    </div>
    <p class="comm">Ut enim ad minim veniam.
    </p>
  </div>
</div>

Upvotes: 1

Views: 5382

Answers (3)

Zuber
Zuber

Reputation: 3473

You need to wrap .top and .comm in a div and with the use of flex you can achieve it

body {
  background: #212121;
  font-family: arial;
}

.main {
  width: 80%;
  margin:20px auto;
}

.wrap {
  width: 100%;
  background: white;
  padding: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
}

a.avatar {
  margin-right: 10px;
}
a.avatar img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.top {
  width: 100%;
  overflow: hidden;
}

a.name {
  font-weight: bold;
  margin-right: 10px;
  float: left;
}

.posted {
  color: #BBB;
  font-size: 12px;
  padding-top: 3px;
  float: left;
}

p.comm {
  margin-top: 5px;
}
.right {
  max-width: 88%;
}
<div class="main">

    <div class="wrap">
    <a href="https://example.com" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png"></a>
    <div class="right">
    	<div class="top">
          <a href="https://example.com" class="name">Jane Doe</a>
          <div class="posted">11 mins ago</div>
        </div>
    <p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p>
    </div>
  </div>

	  <div class="wrap">
    <a href="https://example.com" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png"></a>
    <div class="right">
    	<div class="top">
          <a href="https://example.com" class="name">Jane Doe</a>
          <div class="posted">11 mins ago</div>
        </div>
    <p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
    
    <div class="wrap">
    <a href="https://example.com" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png"></a>
    <div class="right">
    	<div class="top">
          <a href="https://example.com" class="name">Jane Doe</a>
          <div class="posted">11 mins ago</div>
        </div>
    <p class="comm">Lorem ipsum dolor sit amet</p>
    </div>
  </div>

</div>

Working fiddle here

Upvotes: 1

Hanif
Hanif

Reputation: 3797

Just modify on your p.comm selector like below:

p.comm {
    display: block;
    position: relative;
    top: 10px;
    padding-left: 60px;
}

Upvotes: 0

Aryan Twanju
Aryan Twanju

Reputation: 2516

Try using this modified css code.

body {
  background: #212121;
  font-family: arial;
}

.main {
  width: 80%;
  margin: 20px auto;
}

.wrap {
  width: 100%;
  background: white;
  padding: 10px;
  position: relative;
}

a.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  float: left;
  margin-right: 10px;
  position: relative;
}

a.avatar img {
  width: 100%;
}

.top {
  display: flex;
  margin-left: 70px;
}

a.name {
  font-weight: bold;
  margin-right: 10px;
}

.posted {
  color: #BBB;
  font-size: 12px;
  padding-top: 3px;
}

p.comm {
  display: block;
  margin-left: 70px;
  height: 100%;
}

Upvotes: 1

Related Questions