All geek questions in one place

Why is my content showing outside the div?

I have a bubble with content that works fine. Now I want to display the counter (2 lines), which should always be in the lower right corner of this div, INSIDE it. I tried a lot of things, but for some reason it always overlaps the div and shows it outside. What am I doing wrong?

<style type="text/css"> body{ background-color:#f3f3f3; } .commentbox{ background-color: #ffffff; width: 200px; border-color: #D1D1D1; border-radius: 4px; border-style: solid; border-width: 1px; padding-bottom: 9px; padding-left: 9px; padding-right: 9px; padding-top: 9px; position:relative; } .count{ float:right; text-align:right; } </style> <div class="commentbox"> <div class="title">Some several lines long long long long content text goes here </div> <div class="count">123<br>456</div> </div>
+6
source share
4 answers

You .count so that it does not affect its parent container height.

Set overflow: hidden in the parent ( .commentbox ) or use one of the other methods that support float to do this.

+12
source

You really need float: right; for .count ? I think text-align should be enough for the desired layout.

+1
source

Since you are already using position:relative in the parent div. Try instead:

 .count { position:absolute; right:0; bottom:10px; }
0
source

You probably need to add clarity after the div.

 <style type="text/css"> body{ background-color:#f3f3f3; } .commentbox{ background-color: #ffffff; width: 200px; border-color: #D1D1D1; border-radius: 4px; border-style: solid; border-width: 1px; padding-bottom: 9px; padding-left: 9px; padding-right: 9px; padding-top: 9px; position:relative; } .count{ float:right; text-align:right; } </style> <div class="commentbox"> <div class="title">Some several lines long long long long content text goes here </div> <div class="count">123<br>456</div> <div style="clear: both"></div> </div>
0
source

Source: https://habr.com/ru/post/912687/

More articles:


All Articles