When the top property is applied to the inner DIV, the parent DIV will vertically resize

I've encountered an issue where the outer DIV does not resize to fit its content properly. The problem seems to be related to the top property of the inner DIV, which causes it to overflow outside its parent. Is there a way to adjust the vertical size of the outer DIV regardless of the top property being used? I'm aware that this can be achieved with jQuery, but is there a CSS-only solution?

<div id="divPTX_01" style="position:relative;min-height:1px;overflow:hidden;min-width:1px; border: 1px solid red;">         
                <div style="position:relative;float:left;border:2px solid blue;top:130px;">
                    <span>Test</span><br/>
                    <span>Test</span><br/>
                    <span>Test</span><br/>

                    <span>Test 6</span><br/>
                    <span>Test 7</span><br/>
                    <span>Test</span><br/>
                    <span>Test</span><br/>
                    <span>Test</span><br/>

                    <span>Test 6</span><br/>
                    <span>Test 7</span><br/>
                </div>
            </div>

Answer №1

use margin-top instead of simply top

<div id="divPTX_01" style="position:relative;min-height:1px;overflow:hidden;min-width:1px; border: 1px solid red;">         
    <div style="position:relative;float:left;border:2px solid blue;margin-top:130px">
      <span>Test</span><br/>
      <span>Test</span><br/>
      <span>Test</span><br/>
      
      
      <span>Test 6</span><br/>
      <span>Test 7</span><br/>
      <span>Test</span><br/>
      <span>Test</span><br/>
      <span>Test</span><br/>
      
      
      <span>Test 6</span><br/>
      <span>Test 7</span><br/>
    </div>
      
</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

JavaScript Time and Date Formatting

I'm pretty new to programming, especially in Javascript. Can someone help me simplify my code? I'm trying to create a dropdown for months and an input field for the year. Is there a more efficient way to make the month select box? Also, how can ...

The video attribute in HTML is malfunctioning on the react webpage

Currently working on setting up a basic portfolio layout with a video playing in the background on loop. However, despite making some adjustments and modifications, the video is not showing up as expected. Any insights or suggestions on what might be causi ...

Can CSS be altered dynamically in Laravel blade?

Is there a way to dynamically change CSS? I am trying to set the class=sheet padding-top: 28mm; when the size of $anArray is less than 30. If the array has more than 30 elements then apply padding-top: 28 * 2 mm;. Finally, if the array exceeds 60, use pad ...

"Encountering an unexpected validation error while using the LoginForm in Django

The Login and Register Model form I created is experiencing some issues. The Register form works well, but when I try to submit the Login form, it displays a validation error: "User with this Email already exists" This error message was not defined by ...

Detecting the return of a file in an ASP.NET view to conceal an image

Is there a way to detect when ASP.NET returns a file? I recently added code to my project to show a loading gif whenever a button is pressed. <script type="text/javascript> jQuery('.btn').click(function() { jQuery".loader").show(); }); ...

Javascript Steps to trigger a function when selecting the Stay on Page option in Google Chrome

If you're testing my code in the Chrome Browser, hitting refresh will prompt you with 2 options. Leave This Page Stay on This Page By clicking on the Stay on this page button, it should trigger my custom function displayMsg(). Can anyone pr ...

Tips for maintaining an open side menu

I'm having trouble keeping the side menu open when a user clicks on one of the child menu items. Ideally, I want section 1 to display section 2 content when hovered over, and keep both sections open even when section 2 is clicked. The only time they s ...

The content momentarily flashes on the page during loading even though it is not visible, and unfortunately, the ng-cloak directive does not seem to function properly in Firefox

<div ng-show="IsExists" ng-cloak> <span>The value is present</span> </div> After that, I included the following lines in my app.css file However, the initial flickering of the ng-show block persists [ng\:cloak], [ng-cloak], ...

Struggling to dynamically insert rows into an HTML table with jQuery

I have a table that requires dynamic rows to be added. The limit of 4 rows can change based on the table's usage. I am struggling to understand why my add row function is not working. It seems like it might be something simple, but I really need this ...

The concept of see-through backgrounds

I am trying to achieve a more transparent header-menu background, so that the YouTube video underneath it becomes more visible. You can check it out here Unfortunately, the trick mentioned above did not work as expected. .masthead:not(.mixed-header) { ...

Learn the process of sending notifications upon clicking on an advertisement by a user

I'm currently working on a system that displays ads on mobile devices. Our clients have the option to use their own custom HTML code for their advertisements. We want to be able to track when a user clicks on these ads. I am considering wrapping the u ...

Populate a string with HTML elements

I need help loading a string into UIwebview. The text is plain coming from the database. I want the webview to display the text in bold. How can I add an HTML <b> tag or any other tag to format this simple text sourced from the database? ...

Unable to display tags with /xoxco/jQuery-Tags-Input

I'm experimenting with the tagsinput plugin in a textarea located within a div that is loaded using the jquery dialog plugin. The specific plugin I am using is /xoxco/jQuery-Tags-Input. After checking that the textarea element is ready, I noticed th ...

Tips for showcasing a SQL INNER JOIN in HTML using Flask

I'm struggling with displaying a value from another table, and it would be easier to comprehend with the code provided below: contact.py def index(): db = get_db() contacts = db.execute( 'SELECT *' ' FROM conta ...

Caution: The file_get_contents function call cannot be processed as the filename is missing

Every time I attempt to upload an image, I encounter the following error: Warning: file_get_contents(): Filename cannot be empty Here is the code causing the issue: <?php $ImageName = $_FILES["file"]["name"]; $ImageType = $_FILES["file"]['type&a ...

Tips for retrieving and displaying values from a form using only PHP

I have a simple request: I want to input a name, click the submit button, and then display the name below the form. Seems easy right? <?php echo $_POST['one']; ?> <!DocType HTML> <html> <body> <p> ...

Images displayed using jQuery do not fade into view

I have a collection of JSON image URLs that I am using to populate a div with a variety of images. Initially, the images are set at opacity 0 and should gradually fade in through a for loop. Here is the jQuery code snippet: $.ajax('http://example.co ...

Tips for utilizing Angular components alongside ui-router

I am attempting to utilize components (as opposed to controllers and templates) in ui-router. However, I am encountering issues with this approach. I am following the instructions provided in this article on their website. You can also view my code on ...

What is the best way to ensure that the navigation bar remains in its original position when the size of the browser window is changed?

I'm a beginner in web development and Stack Overflow. This is my first time creating a website and I'm experiencing an issue with the navigation bar. It keeps shifting its position when resizing the browser window. Below is the source code I have ...

How can I prevent iOS Safari from prioritizing landscape CSS over portrait CSS?

Having an issue with two media queries: <link rel="stylesheet" media="only screen and (orientation: landscape)" href="/stylesheet/landscape.css" /> <link rel="stylesheet" media="only screen and (orientation: portrait)" href="/stylesheet/portrait. ...