CODEWITHSUNDEEP
htmlcss
Thomas Hutton
Thomas Hutton

Reputation: 803

Div Not Fitting to Content

I'm having an issue with my div. I'm floating an image to the right and I've got my text beside it. I'm trying to make a linear-gradient div, however, the div is filling the entire page.

So how do I make my div fit my contents only?

I've tried the inline-block way and it just effective clears my text to below the image.

The issue:

enter image description here

Code: 

.Popcorn {
  float: right;
  position: relative;
  top: -45px;
}
.Software {
  padding: 4px;
  min-width: 100%;
  padding-top: 20px;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #277FD8 0%, #ffffff 30%, #ffffff 100%) repeat scroll 0 0;
}
<img src="/img/popcorn_edited.png" class="Popcorn" />
<div class="Software">
  <h3>The Software You Want!</h3>
  <br>
  <p>Android is the World's leading mobile and tablet operating system. This means no learning curves for Android users. The media box is powered by Android which allows you to download applications and share it with all your Android devices or vice versa.
    You can download from millions of apps, games, books, movies and more on the Google Play store.</p>
</div>

Upvotes: 0

Views: 60

Answers (3)

dippas
dippas

Reputation: 60553

you can easily solve this with flexbox, plus remove min-width:100% from .Software

body {
  margin: 0
}
.wrap {
  display: flex
}
.Software {
  padding: 4px;
  padding-top: 20px;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #277FD8 0%, #ffffff 30%, #ffffff 100%) repeat scroll 0 0;
}
img {
  width: 100px;
  height: 100px;
}
<div class="wrap">
  <div class="Software">
    <h3>The Software You Want!</h3>
    <br>
    <p>Android is the World's leading mobile and tablet operating system. This means no learning curves for Android users. The media box is powered by Android which allows you to download applications and share it with all your Android devices or vice versa.
      You can download from millions of apps, games, books, movies and more on the Google Play store.</p>
  </div>
  <img src="//lorempixel.com/100/100" class="Popcorn" />
</div>

Upvotes: 1

Johannes
Johannes

Reputation: 67748

1.) Put the image into the DIV

2.) Assign overflow: auto; to the container to also cover the floated image.

<div class="Software">
  <img src="/img/popcorn_edited.png" class="Popcorn"/>
  <h3>The Software You Want!</h3>
    <p>Android is the World's leading mobile and tablet operating system. This means no learning curves for Android users. The media box is powered by Android which allows you to download applications and share it with all your Android devices or vice versa. You can download from millions of apps, games, books, movies and more on the Google Play store.</p>
</div>

.Popcorn {
  float: right;
  position: relative;
  top: -45px;
}
.Software {
  overflow: auto;
  padding: 4px;
  min-width: 100%;
  padding-top: 20px;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #277FD8 0%, #ffffff 30%, #ffffff 100%) repeat scroll 0 0;
}

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

You can set a width to your div with gradient with calc() function, if you know the popcorn image has a fixed width : 

.Software {
  padding: 4px;
  width: calc(100% - 350px);
  padding-top: 20px;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #277FD8 0%, #ffffff 30%, #ffffff 100%) repeat scroll 0 0;
}

Fiddle here

Upvotes: 3

Related Questions