CODEWITHSUNDEEP
htmlcss
Vian Ojeda Garcia
Vian Ojeda Garcia

Reputation: 867

How to clear the bottom of a float if text is below it

I am making a web that's like a facebook where there is a image on the left and text on the right but if the text reach the bottom of the image it goes to the bottom of image. Its hard to explain so I will attached a screenshot

.comment {
  width: 100%;
}

.comment img {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  margin-right: 10px;
  float: left;
}

.comment img:after {
  content: "";
}

strong {
  color: #365899;
  font-weight: bold;
}
<div id="View_post-1" class="row">
  <div>
    <div class="comment">
      <img src="../Image/Mark Anthony Fernandez.jpg">
      <small>
         <strong style="">Mark Anthony Fernandez</strong>
      </small>
      <br />
      <div>
        <span style="font-size:small;position:relative;word-wrap:break-word;">commentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcomment</span>
      </div>
      <br>
    </div>
  </div>
</div>

enter image description here

Upvotes: 1

Views: 90

Answers (5)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

Please try this code:

.comment {
    display: inline-block;
    width: 100%;
  }
  .comment .image {
    float: left;
    width: 80px;
  }
  .comment img {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    margin-right: 10px;
    float: left;
  }
  .content {
    float: left;
    width: -webkit-calc(100% - 80px);
    width: -moz-calc(100% - 80px);
    width: -ms-calc(100% - 80px);
    width: calc(100% - 80px);
  }

  .comment img:after {
    content: "";
  }

  strong {
    color: #365899;
    font-weight: bold;
  }
  
<div id="View_post-1" class="">
  <div>
    <div class="comment">
      <div class="image">
        <img src="../Image/Mark Anthony Fernandez.jpg">
      </div>
      <div class="content">
        <small>
          <strong style="">Mark Anthony Fernandez</strong>
        </small>
        <br />
        <div>
          <span style="font-size:small;position:relative;word-wrap:break-word;">commentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcomment</span>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Euripides Georgantzos
Euripides Georgantzos

Reputation: 636

If I understand well you don't want the text to wrap around the image to the left. You can use flexbox to achieve that and it will give you a responsive solution. I have created a codepen for your case: https://codepen.io/frexos/pen/yPjqYm 

<div id="View_post-1" class="row">
  <div>
    <div class="comment">
      <img src="../Image/Mark Anthony Fernandez.jpg">
      <div class="text">
          <small>
              <strong style="">Mark Anthony Fernandez</strong>
          </small>
          <br />
          <div>
              <span style="font-size:small;position:relative;word-wrap:break-word;">commentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcomment</span>
          </div>
      </div>  
  <br>
</div>


.comment {
width: 100%;
display: flex;
}

.comment img {
display: block;
height: 40px;
width: 40px;
border-radius: 20px;
margin-right: 10px;
float: left;
}

.comment img:after {
content: "";
}

strong {
color: #365899;
font-weight: bold;
}

.text {
min-width: 10%;
word-wrap: break-word;  
}

Upvotes: 2

Upvesh Kumar
Upvesh Kumar

Reputation: 54

Try this:

.comment div{
    display: flex;
    word-break: break-all;
}

Upvotes: 0

Natalie Hedstr&#246;m
Natalie Hedstr&#246;m

Reputation: 2631

If you always know the width of the image you can just add a padding left to your div containing the text.

.comment > div{ padding-left: 50px;}


.comment {
  width: 100%;
}

.comment img {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  margin-right: 10px;
  float: left;
}

.comment img:after {
  content: "";
}

strong {
  color: #365899;
  font-weight: bold;
}

.comment > div{ padding-left: 50px;}
<div id="View_post-1" class="row">
  <div>
    <div class="comment">
      <img src="../Image/Mark Anthony Fernandez.jpg">
      <div>
      <small>
          <strong style="">Mark Anthony Fernandez</strong>
      </small>
      <br />
      <div>
        <span style="font-size:small;position:relative;word-wrap:break-word;">commentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcommentcomment</span>
      </div>
      </div>
      <br>
    </div>
  </div>
</div>

Upvotes: 0

Super User
Super User

Reputation: 9642

It looks you are using bootstrap to set your layout, you can use media object for this, check updated snippet below... for detail reference click here

.comment{
width:100%;
}
.comment img{
    border-radius: 50px;
}
.comment img:after{
    content:"";
}
strong{
    color:#365899;
    font-weight:bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="View_post-1" class="row">
	<div>
		<div class="comment">
    <div class="media">
  <div class="media-left">
     <img class="media-object" src="https://dummyimage.com/50x50/cccccc/ff0000.png&text=Sample-Text">   
  </div>
  <div class="media-body"><small>
				<strong style="">Mark Anthony Fernandez</strong>
			</small>
			<br />
			<div>
			<span style="font-size:small;position:relative;word-wrap:break-word;">commentcommentcommentcom mentcommentcommentcommentcommen tcommentcommentcommentcommentcommentc ommentcommentcommentcom mentcommentco mmentcommentcomme ntcommentcommentcommentcomme ntcomm entcommentcommentcomme ntcommentcommentcommentcommentcommen tcommentcommentcommentcommentcommentcommentcommentc ommentcommentcomm entcomment</span>
			</div>
			<br>
  </div>
</div>	
		</div>
	</div>
</div>

Upvotes: 2

Related Questions