CODEWITHSUNDEEP
htmlcssimage
darkchampionz
darkchampionz

Reputation: 1224

HTML - image to the left of div

I am trying to display an outer div with an image on the left and another div with some text to the right on it. I use:

img {
  float: left;
}

div.out {
  background-color: blue;
  padding: 10px;
}

div.in {
  background-color: yellow;
  padding: 5px;
}
<div class="out">
  <img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
  <div class="in">
    Flowers<br>are<br>cool
  </div>
</div>

Code works almost fine as shown below but how can I make the first blue div extend to the very end of where the image ends? Also, how can I add a 10px space let's say between the image and the text? (And also, is my way of adding float: left; to the img the best way to display it to the left or is there a better way?) Thanks a lot

enter image description here

Upvotes: 2

Views: 1220

Answers (4)

Ehsan
Ehsan

Reputation: 12959

display:flex don't support in IE9 and earlier, So i use of other way :

.out {
    background-color: blue;
    padding: 15px;
}

.content {
    background-color: yellow;
}

.content:after {
    content: '';
    display: block;
    clear: both;
}

.in {
    padding-top: 5px;
}

img {
    float: left;
    margin-right: 5px;
}
<div class="out">
  <div class="content">
      <img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
      <div class="in">Flowers<br>are<br>cool</div>
  </div>
</div>

Upvotes: 0

Nicholas
Nicholas

Reputation: 151

    img {
  float: left;
}

div.out {
  background-color: blue;
  padding: 10px;
}

div.in {
  background-color: yellow;
  padding: 5px;
}

.clr {
  clear: both;
}
<div class="out">
  <img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
  <div class="in">
    Flowers<br>are<br>cool
  </div>
<div class="clr"></div>
</div>

If you're looking for the blue box to extend to the end of your floated content, your looking for a clear fix. See the minor change above with the added div with class clr.

-- Edit of all edits -- Realized after doing what you asked... it probably wasn't EXACTLY what you meant to ask. But I got the blue box to extend to where the image ends haha.

Upvotes: 1

j08691
j08691

Reputation: 207901

You can use the flexbox model for this. Remove the float and on the outer div use display: flex;, and the inner div flex-grow: 1;:

#flexbox_container {
  display: flex;
  background-color: blue;
  padding: 10px;
}

div.flex_item {
  background-color: yellow;
  padding: 10px;
  flex-grow: 1;
}
<div id="flexbox_container">
  <img class="flex_item" src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
  <div class="flex_item item_selected">
    Flowers
    <br>are
    <br>cool</div>
</div>

Upvotes: 1

kyun
kyun

Reputation: 10264

img {
  display: inline-block;
}

div.out {
  background-color: blue;
  padding: 10px;
  display: flex;
}

div.in {
  display: inline-block;
  width: 100%;
  background-color: yellow;
  padding: 5px;
}
<div class="out">
  <img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
  <div class="in">
    Flowers<br>are<br>cool
  </div>
</div>

I recommend you should learn how to use flex

Upvotes: 2

Related Questions