CODEWITHSUNDEEP
htmlcss
user1175969
user1175969

Reputation: 570

Place image to the right of multiple lines of text

I have 2 divs: One div for multi-line text and another for an image that is to the right of the first div.

The width of the image is not fixed - it is controlled by a user defined parameter.

<div>
  <div class="inline_div">
    multi line text...
  </div>

  <div class="picture">
    image...
  </div>
</div>


inline_div {
    display: inline-block;
}
. picture {
    display: inline-block;
    vertical-align: top;
}

This works great for a single line of text. But when the text goes into multiple lines, the image gets placed below the text.

Upvotes: 0

Views: 364

Answers (1)

Nisarg Shah
Nisarg Shah

Reputation: 14541

You can float both div's to left, and assign appropriate widths as required.

.container {
  clear: both;
  width: 100%;
}

.inline_div {
    float: left;
    width: 70%;
}
.picture {
    float: left;
    width: 30%;
}
<div class="container">
  <div class="inline_div">
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
  </div>

  <div class="picture">
    <img src="https://placehold.it/150x150" />
  </div>
</div>

Or, you could use display: flex with appropriate width distribution.

.container {
  display: flex;
}

.inline_div {
  flex: 2;
}
.picture {
  flex: 1;
}
<div class="container">
  <div class="inline_div">
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
  </div>

  <div class="picture">
    <img src="https://placehold.it/150x150" />
  </div>
</div>
<div class="container">
  <div class="inline_div">
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
  </div>

  <div class="picture">
    <img src="https://placehold.it/250x250" />
  </div>
</div>

Upvotes: 2

Related Questions