13

If you try to give margin-left to C1 div, it moves and overflow is hidden. But if you try to give margin-left to C2 div, it moves towards right, but overflow is not hidden, rather it moves in next line (behavior of inline-block).

So why is it not working on C2 div? Is there any way to solve this problem?

(Basically I want C1 and C2 div to be placed together and overflow should be hidden if I increase their widths, or if I give them margins).

Here's what I'm 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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Vikas Kumar
  • 689
  • 3
  • 7
  • 18

2 Answers2

14

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

white-space

The white-space property is used to describe how whitespace inside the element is handled.

nowrap

Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

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

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

Here's an excerpt from an answer by @BoltClock:

  • The value of overflow on a container doesn't influence whether or when its contents overflow; it only changes how it and its contents are rendered, when overflow does occur.

  • So you have to force the inline-blocks to actually overflow the container.

  • Since an inline-block has the same rigid physical structure as a block container box, it's impossible for an inline-block to "break apart" or wrap when it's the only inline-level box on a given line box.

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

Don't use Display Property.. Use 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>
Ashish Talreja
  • 156
  • 6