Div not growing to accommodate images

I've attempted to use the overflow:hidden; property, but it didn't have the desired effect. Essentially, my div is structured like this, and when I add more images, it doesn't expand along with them.

This is how the div appears: https://i.sstatic.net/oZmgj.png

.working{
    width: 600px;
    height: 2000px;
    background-color: #ECECEC;
    border-style: ridge;
    border-width: 5px;
    overflow: hidden;
}
<div class="working">

<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">
Shopify dropshipping</p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png"  align="middle" style="width: 100px; height: 100px;">
    Coding </p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg"  align="middle" style="width: 100px; height: 100px;">
    Advertisement </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png"  align="middle" style="width: 100px; height: 100px;">
    Amazon Mechanical Turk </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png"  align="middle" style="width: 100px; height: 100px;">
    Fiverr </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg"  align="middle" style="width: 100px; height: 100px;">
    Sell your photos </p> 
     <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
    </div>

htmlcss

Answer №1

One reason for this issue is the presence of a fixed height in your code. Consider removing height: 2000px.

.working{
    width: 600px;
    background-color: #ECECEC;
    border-style: ridge;
    border-width: 5px;
    overflow: hidden;
}
<div class="working">

<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">
Shopify dropshipping</p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png"  align="middle" style="width: 100px; height: 100px;">
    Coding </p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg"  align="middle" style="width: 100px; height: 100px;">
    Advertisement </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png"  align="middle" style="width: 100px; height: 100px;">
    Amazon Mechanical Turk </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png"  align="middle" style="width: 100px; height: 100px;">
    Fiverr </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg"  align="middle" style="width: 100px; height: 100px;">
    Sell your photos </p> 
     <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p><p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>

    </div>

Answer №2

Replace height:2000px; with height:auto;. This adjustment will resolve the height issue, allowing it to expand as needed when new div or p elements are added.

.working{
    width: 600px;
    height:auto;
    background-color: #ECECEC;
    border-style: ridge;
    border-width: 5px;
    overflow: hidden;
}
<div class="working">


<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">
Shopify dropshipping</p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png"  align="middle" style="width: 100px; height: 100px;">
    Coding </p>

<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg"  align="middle" style="width: 100px; height: 100px;">
    Advertisement </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png"  align="middle" style="width: 100px; height: 100px;">
    Amazon Mechanical Turk </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png"  align="middle" style="width: 100px; height: 100px;">
    Fiverr </p>
 <p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg"  align="middle" style="width: 100px; height: 100px;">
    Sell your photos </p> 
     <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg"  align="middle" style="width: 100px; height: 100px;">PocketFlip</p>
     <p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">
Testing 1</p>
<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;">    <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;">
Testing 2</p>
    </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

Enhancing the appearance of an image upon hovering in ReactJS: A step-by-step guide

My issue arises from my desire to border an image and display a Card with information upon hovering, but the problem is that this style is being applied to all images rather than just the one being hovered over. After pulling data from a movie API, I stor ...

cssreactjsreact-hooks

What is the method for specifying the default option in a SELECT Tag and how can the Index of the chosen option be obtained?

Looking for HTML and JavaScript code that can manipulate SELECT and OPTION Elements. <select> <option> </option> <option> </option> </select> How do I retrieve the index of the selected option and obtai ...

javascripthtmlindexinghtml-select

Breaking the page for media printing in Zurb Foundation 5

How can I print specific pages from my website using the Foundation 5 CSS framework? In my CSS, I have included the following code: @media print { hr.page-break{page-break-after:always!important;} } I tried using the .page-break class to insert ...

cssprintingzurb-foundation

What techniques can be applied to keep a flexbox from expanding in width when it includes a text input field?

After implementing the following CSS/HTML code, I achieved my desired outcome - three boxes displayed in a row. The middle box has a fixed width while the outer boxes expand equally on either side: #container { display: flex; } #container > * { back ...

htmlcssflexbox

In Firefox mobile, a fixed positioned element will move with the page until the scrolling comes to a halt

I am facing an issue with a CSS element set to position: fixed. While it works perfectly on desktop browsers, it behaves poorly on mobile browsers, especially Firefox. The main problem is that the fixed element scrolls along with the page and then abrupt ...

javascriptjqueryhtmlcssfirefox

Adjust the dimensions of the initial cell

I need to adjust the size of the initial "generated" cell in a grid. The grid is not present in the HTML markup until JavaScript prints RSS information on it, making it difficult to target specific rows or cells directly. Note: The first element is hidden ...

javascripthtmljquerycsscss-grid

Switching the website address after picking an option from the drop-down menu

I have an HTML form that includes two dropdown menus. The first dropdown is populated from a database using PHP, and the second dropdown is linked to the first one and uses AJAX to update its values based on the selection from the first dropdown. My goal ...

javascriptphpjqueryhtmlajax

An introduction to utilizing .keypress() in jquery

I'm exploring the use of .keypress() to allow users to press enter and trigger a button click on my modal (which closes the modal). When I initially code it as: $(document).keypress(function () { console.log('keypress'); }); it works, but ...

javascriptjqueryhtml

Floating elements within scrolling loading

I've been trying to figure out how to add a loading scroll feature to my webpage, but I'm running into issues with the div not displaying correctly. Instead of loading underneath the scroll, the content pops up on the side as shown here when scro ...

javascriptjquerycssajax

Aligning text in the middle of two divs within a header

Screenshot Is there a way to keep the h4 text centered between two divs? I want it to stay static regardless of screen resolution. Currently, the icon and form remain in place but the h4 text moves. How can I ensure that it stays in one spot? <!doctyp ...

htmlcss

Update the style of a div within an iframe in React

I'm currently developing a project in Next.js and I've added an iframe within a component. The issue I'm facing is that I need to customize the style of a specific div inside the iframe, but I'm having trouble targeting the div with the ...

javascriptcssreactjsiframenext.js

To enhance the menu's appearance, apply a bottom box shadow when scrolling both up and down

My menu has the following CSS properties: #header { width: 100%; position: fixed; z-index: 9000; overflow: auto; } With these CSS properties, the element #header will always stay on top, regardless of scrolling. My goal is to add a bottom box sha ...

jqueryhtmlcss

Executing Python output in HTML with Django

I am currently working on a Django project and in the views.py file of my app, I have some outputs stored in a dictionary. The code snippet from views.py is as follows: from django.shortcuts import render def allblogs(request): a = request.GET[' ...

pythonhtmldjangopython-3.x

PHP-generated graphic. CSS glitch causing scaling issues. SVG polygons involved

I've developed a script that utilizes SVG Polygons to present a chart. Here's the scenario. I have a product with a maximum price and a minimum price. Every Monday (referred to as a cycle), I gather this information. My system then computes a b ...

phpmysqlcsssvgpolygon

Elements refuse to show up in a single line

I've styled two div elements with the properties below: .elem1 { width: 47.5%; margin-right: 2.5%; display: inline-block; } .elem2 { width: 47.5%; margin-right: 2.5%; display: inline-block; } Note: When I decrease the margin ...

htmlcss

CodeIgniter - Utilizing quotes within a form

Consider a scenario where the database has a field named NAME which contains text with both single and double quotes: TEST1 "TEST2" 'TEST3' Now, if you want to edit this value using the following code in a form: <label for="name">Ful ...

phphtmlformscodeigniter

What could be the issue with my dropdown navigation bar?

Currently in the process of learning CSS and HTML, I wanted to create a basic dropdown menu using CSS exclusively. However, there are some aspects that are unclear to me, so I would appreciate any assistance in figuring out what is happening. Here is how ...

htmlcssdrop-down-menu

What is the process for implementing a simple bootstrap design similar to the one featured in the Laravel 5 tutorial?

I recently started using Laravel. After installing Laravel 5 on my Windows 7 machine with WAMP, I began working through the intermediate task tutorial on the Laravel documentation (http://laravel.com/docs/5.1/quickstart-intermediate). The tutorial includes ...

csstwitter-bootstraplaravel-5laravel-5.1

Is there a way to ensure a box remains fixed on the edge of a browser window?

Looking to create a tooltip div that pops up next to and aligns with the top of a specific input element when it is clicked: lorem ipsum dolor ____________ ___________________ | this | [_button____clicked_] | appears | | on s ...

javascripthtmlcssjquery

I am interested in implementing a "slide up" effect for the "slide menu" when it loses focus

When I focus out of the asmenu class, I attempt to trigger a 'slide up' effect. However, if I select two checkboxes from the child elements within the asmenu class, the focusout event is still triggered. Ideally, I would like the 'slide up& ...

javascripthtmljquerycss