Geek Answers Handbook

Why is overflow: hidden not working on my div?

If you try to pass margin-left to a C1 div, it moves and the overflow is hidden. But if you try to pass margin-left to div C2, it moves to the right, but the overflow does not hide, but moves to the next line ( inline-block behavior).

So why doesn't it work on a C2 div? Is there any way to solve this problem?

(Basically, I want the separators C1 and C2 to be placed together, and the overflow should be hidden if I increase their width, or if I give them fields).

Here is what I am trying:

 .c1 { width: 220px; height: 200px; background-color: #666666; display: inline-block; } .c2 { width: 200px; height: 220px; background-color: #CCCCCC; display: inline-block; } .c3 { width: 180px; height: 210px; background-color: #333333; display: block; } .wrapper { background-color: red; width: 500px; height: 500px; display: inline-block; overflow: hidden; } 
 <div class="wrapper"> <div class="c1">C1</div> <div class="c2">C2</div> <div class="c3">C3</div> </div>
+7
html css
source share
2 answers

Add white-space: nowrap to the container ( .wrapper ).

white space

The white-space property is used to describe how spaces inside an element are processed.

nowrap

Clears spaces as normal, but suppresses line breaks (text wrapper) in the text.

source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

To understand why, with white-space: normal , C2 wraps, but C1 is not, see these posts:

  • Understanding inline-block overflow behavior: hidden
  • Why are these inline div blocks div, even though their parent has overflow-x: scroll?

Here is an excerpt from @BoltClock answer :

  • The overflow value on the container does not affect when its contents are full; it only changes how it and its contents are displayed when an overflow occurs.

  • Therefore, you must force the built-in blocks to actually overflow the container.

  • Since the inline block has the same rigid physical structure as the container block, it is not possible for the inline block to “fall apart” or wrap when it is the only box in the linear level in this row field.

+10
source share

Do not use the display property. Use the Float property, for example

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="jquery-2.2.0.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style> .c1{ width: 220px; height: 200px; background-color:#666666; float:left; margin-left:10px; overflow:hidden; } .c2{ width: 200px; height: 220px; background-color:#CCCCCC; float:left; margin-left:10px; overflow:hidden; } .c3{ width: 180px; height: 210px; background-color: #333333; float:left; margin-left:10px; overflow:hidden; } .wrapper{ background-color: red; width: 500px; height: 500px; display: inline-block; overflow: hidden; } </style> </head> <body> <div class="wrapper"> <div class="c1">C1</div> <div class="c2">C2</div> <div class="c3">C3</div> </div> </body> </html>
0
source share

More articles:


All Articles