Element Not Adjusting to Content Size

I am encountering an issue with my div. I have floated an image to the right and placed my text beside it. My aim is to create a div with a linear gradient, however, the div ends up filling the entire page.

How can I make my div adjust to fit only its contents?

I attempted using the inline-block method but it just pushes my text below the image.

The problem:

https://i.stack.imgur.com/q5zEk.png

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>

htmlcss

Answer №1

To customize the width of your div containing a gradient, consider using the calc() function and adjusting based on the known width of the popcorn image:

.Snacks {
  padding: 8px;
  width: calc(100% - 250px);
  padding-top: 15px;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #71B923 0%, #ffffff 40%, #ffffff 100%) repeat scroll 0 0;
}

Check out this demo

Answer №2

1.) Embed the image within the DIV

2.) Set overflow: auto; to the container to ensure the floated image is also included.

<div class="Technology">
  <img src="/img/gadget_revised.png" class="Gadget"/>
  <h3>The Latest Technology Trends</h3>
    <p>Stay up-to-date with cutting-edge technology with our range of gadgets and devices. Our products are designed to simplify your life and enhance your productivity. From smartphones to smart home devices, we've got you covered.</p>
</div>

.Gadget {
  float: right;
  position: relative;
  top: -35px;
}
.Technology {
  overflow: auto;
  padding: 6px;
  min-width: 100%;
  padding-top: 25px;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #45A29E 0%, #ffffff 30%, #ffffff 100%) repeat scroll 0 0;
}

Answer №3

By utilizing flexbox, you can easily tackle this issue and also eliminate min-width:100% from the .Software section

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on keeping a div element in a fixed position until triggered by jQuery

I've managed to create a navigation bar within a header that sticks to the top of the screen once you scroll down past 100px. The functionality works well, but I'm looking to make the navigation bar stay fixed on the right until it snaps, essenti ...

javascriptjqueryhtmlcss

Recreating a <select> element and verifying it once more using JS/HTML5

Before I delve into my issue, I would like to offer an apology for any errors in my English. So, the HTML code I am working with looks like this: <body> <div id="container"> <div id="taskList"> <div id="firstTask"> & ...

javascriptangularjshtmldrop-down-menu

Is it possible to maintain a fixed footer while utilizing async/ajax functions?

Looking for a reliable solution to have a fixed footer that adjusts based on the page content? I've tested multiple samples, but they all fall short when it comes to incorporating AJAX elements. Is there a fixed footer out there that truly works seaml ...

javascriptjqueryhtmlcss

Utilize the `addEventListener` and `removeEventListener` functions on the menu to

Why is my mobile menu not functioning correctly? The submenu should open on the first click and redirect to the parent URL on the second click, which works fine. However, when the window width increases to 768px or more, the submenu should appear on hover ...

javascripthtmlcssaddeventlistenerwindow-resize

Tips on configuring commas in the Prettier extension within Visual Studio Code

My CSS file is causing me some trouble. I am trying to configure Prettier in VS Code so that when I write a comma, the selector I entered stays in line with the previous one. However, whenever I save the file, the selector gets moved to the next line. My ...

cssvisual-studio-codeprettier

How to use Jquery to fetch the value of a td element nested inside another

After consulting the manual, I am trying to find a way to extract the value in the second column of a table when a specific span is clicked. However, the challenge is that the click event is currently being triggered by the first span cell. Here is the jQu ...

javascriptjqueryhtmljquery-ui

Update Button Colour upon clicking the Button

I have multiple buttons lined up in a row on my webpage. I want the button's color to change when I click on them. Below is a snippet of my code: $( "button.change" ).click(function() { $(this).toggleClass( "selected" ); }); .Button { font-fa ...

javascriptjqueryhtmlcss

Encountered an error when attempting to use 'appendChild' on 'Node': the first parameter is not the correct type. It was able to work with some elements, but not with others

I'm currently working on a script that utilizes fetch to retrieve an external HTML file. The goal is to perform some operations to create two HTMLCollections and then iterate over them to display a div containing one element from each collection. Here ...

javascripthtmldomchild-nodes

Centering multiple floated divs using bootstrap

Looking for some help with a bootstrap panel design. I am trying to align a heading title to the left and a select element along with a date range input to the right of the panel heading, vertically aligned in the middle. While I have made progress on this ...

htmlcsstwitter-bootstrap

Displaying an error or success message upon submitting a form is currently not functioning as

I have implemented a registration/login system on my website, and currently, it shows errors and success messages at the top of the page. I want to display these messages under the form instead. However, every time I attempt to place them below the form, i ...

phphtmlforms

The dark mode class in Next.js/React does not take effect until a local change is made

I've been diving into a helpful tutorial on implementing dark mode toggle in my project. The tutorial uses react-toggle and can be found here. Everything seems to be working fine except for one issue that arises on the initial page load. When the bro ...

htmlcssreactjsnext.js

What is the method for establishing xpath for non-sequential words within a single attribute?

There is a single tag present : <span class="abc pqr and xyz"> I am looking to locate this specific tag in the DOM using xpath. I have attempted the following: //span[contains(@class,'abc pqr')]..... The term 'and' in the cla ...

htmldomxpathselenium-webdriver

Utilizing Webpack to emulate the @apply functionality of Tailwind CSS and shift away from using @extend in SASS

I am currently developing an internal CSS 'framework' / methodology that falls somewhere in between ITCSS and Tailwind. We heavily rely on utility classes, but sometimes the length of the actual class name becomes too much and we feel the need t ...

csswebpacksasstailwind-css

Identify and correct improper or invalid HTML closing tags in Visual Studio Code

As part of my transition to Visual Studio Code from Adobe Brackets, I am looking to replicate the feature that highlights incorrect close markup in my code. This feature is particularly helpful in identifying duplicated </div> tags like shown in the ...

htmlvisual-studio-codemarkup

Transforming beautifulsoup content back into HTML format

Currently, I'm utilizing beautifulsoup to extract, parse, and modify an HTML document. The process seems to be functioning flawlessly; however, upon converting the soup object back into HTML using prettify(formatter="html"), I've notice ...

pythonhtmlbeautifulsoup

Submitting an ajax form with the use of the symbol '&'

I am currently working on a form submission using the .ajax() method. Within my script, I have the following code: data: dataString, The variable dataString is composed of: var list = $('.listsummary').val() The listsummary class is assoc ...

javascriptjqueryhtmlajax

What's preventing the buttons from shifting positions?

Having some trouble with my Minesweeper Web Game setup. My buttons are stuck in place and won't budge. Can someone help me figure out what's wrong? Here's the code snippet I've been working on (FYI, using NetBeans 8.1 IDE) HTML: <! ...

htmlcssnetbeansnetbeans-8.1

What is the reason behind hyperlinks breaking the continuity of the text on a line? Is there a

When I have a line of code containing several hyperlinks, my desired output is a single line. However, despite using CSS to set white-space to nowrap, the result is not as expected. The line of code in question is: <a href="profile.php?v=<?php echo ...

phphtmlcss

What is the process for transferring a folder to public storage in Laravel?

I've been attempting to upload and save a folder (which contains several files) into my local directory, but I'm encountering difficulties. Below is the input form I have: <input type="file" name="folder" id="folder&q ...

phphtmllaravel

Is it possible to customize the color of the placeholder and clear-icon in the ion-search bar without affecting

I am working with two ion-search bars and I need to customize the placeholder and clear icon color for just one of them. <ion-searchbar class="search-bar" placeholder="search"></ion-searchbar> My goal is to target a specific i ...

cssangulartypescriptionic2