CODEWITHSUNDEEP
htmlcss
Solace
Solace

Reputation: 9010

Why aren't these divs displaying in the same line despite of "display:inline-block"?

JSFiddle

In the following SSCCE, I have applied display:inline-block to div.content-text and div.content-image. But still they are not displaying in the same line. Instead they are displaying like this:

enter image description here

I want them to display in the same line, in the blue box. Why aren't they, despite the display:inline-block;? How should I get this to work?

.content-box {
  display: inline-block;
  width: 350px;
  height: 250px;
  border: 5px solid blue;
}
.content-box .content-image {
  width: 35%;
  height: 100%;
  background-size: cover;
  /*border: 5px solid orange;*/
}
.content-box .content-text {
  background-color: rgb(255, 255, 255);
  color: #1c1a1a;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 100;
  overflow-y: auto;
  /*border: 5px solid #52e007;*/
  height: 100%;
  width: 65%;
}
<!DOCTYPE>

<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

  <div class="content-box">


    <div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>


    <div class="content-image" style="background-image:url(http://www.penttila-gardens.com/activities/walking/countryside/images/02-harvest.jpg)"></div>


  </div>

</body>

</html>

Upvotes: 0

Views: 538

Answers (2)

potashin
potashin

Reputation: 44581

You should have applied this inline-block layout to inner elements .content-box .content-image and .content-box .content-text, not container .content-box. After that, you should remove white spaces between elements (they are appearing due to inline layout), for example, by applyingfont-size: 0 (or word-spacing: -100%) to the .content-box.

JSFiddle

Upvotes: 2

Sebasti&#225;n Rojas
Sebasti&#225;n Rojas

Reputation: 2891

First of all, you should use the display property in the chuilds, not in the parent. Second, there's a problem with a space between display-inline elements (https://css-tricks.com/fighting-the-space-between-inline-block-elements/). I used the negative amrgin solution, but there's others in the link.

Right now I cannt testet in other browsers (only chrome and IE 8 to 10). But you have to think in what do you need and the browser support. Maybe use float or flexbox instead could be better depending on your needs.

.content-box {
  width: 350px;
  height: 250px;
  border: 5px solid blue;
}
.content-box > div {
  display: inline-block;
}
.content-box .content-image {
  width: 35%;
  height: 100%;
  background-size: cover;
  /*border: 5px solid orange;*/
}
.content-box .content-text {
  background-color: rgb(255, 255, 255);
  color: #1c1a1a;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 100;
  overflow-y: auto;
  /*border: 5px solid #52e007;*/
  height: 100%;
  width: 65%;
margin-right: -4px;
}
<!DOCTYPE>

<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

  <div class="content-box">


    <div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>


    <div class="content-image" style="background-image:url(http://www.penttila-gardens.com/activities/walking/countryside/images/02-harvest.jpg)"></div>


  </div>

</body>

</html>

Upvotes: 2

Related Questions