Tips for changing the size of a div using an absolute div position

Is it possible for the #parent div to resize based on the dimensions of the #child div (if the #child div is using position:absolute;)?

Similar to how the #t_parent table resizes according to the size of the #t_child table.

<div id="parent" style="position:relative; width:500px; height:500px; border:#F00 3px solid;">
    <div id="child" style="position:absolute; left:20px; width:800px; height:500px; border:#06F 3px solid;"></div>
</div>



<table id="t_parent" width="500" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>

        <table id="t_child" width="800" border="1" cellspacing="0" cellpadding="0">
          <tr>
            <td>TEXT</td>
          </tr>
        </table>

    </td>
  </tr>
</table>
htmlcss

Answer №1

Resizing is not possible if the width and height are fixed.

Answer №2

When using position:absolute inside a position:relative, the div becomes detached from its parent and cannot be resized.

However, removing position:absolute and adding display:table to the parent div allows for resizing.

Take a look at this example:

http://jsfiddle.net/9gxyH/

Answer №3

To make the child div resize according to its parent div without using position:absolute, we need a different approach. Position:absolute is typically used when we want an element to not affect other elements on the page.

If you still want this functionality, you may have to incorporate some JavaScript into your code.

Feel free to check out this example on http://jsfiddle.net/sandeep/CLb5r/13/

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

Find all objects in an array that have a date property greater than today's date and return them

I have an array of objects with a property called createdDate stored as a string. I need to filter out all objects where the createdDate is greater than or equal to today's date. How can this be achieved in typescript/javascript? notMyScrims: Sc ...

javascripthtmlarraysangulartypescript

Tips for effectively handling color inheritance within Bootstrap 5

I need to customize Bootstrap 5 .text-success color for better contrast on my custom .bg-lvlN classes. Here is how I have defined them: .bg-lvl1 { background-color: #303333; } .bg-lvl2 { background-color: #222424; } /* Overriding .text-success c ...

csssassbootstrap-5

How does JQuery handle color parsing in text?

Is there a way to automatically parse colors in text and apply them to CSS? For instance, if I type #40464f, I want the color to be caught and included in some CSS styles. I am familiar with how to achieve this by adding markup: <span data-color=""> ...

jquerycsscolors

Sending Javascript Variable through Form

I'm a newcomer to JavaScript and struggling to solve a particular issue in my script. I need help passing the variable "outVal" to a PHP script when the submit form is clicked. The value of "outVal" should come from the "output" value in the script. I ...

javascripthtmlforms

Tips for preventing the impact of angular mat-panel position changes on matdialog

In my Angular project, I utilized Matmenu and MatDialogModule. I needed to change the position of mat-menu, so I achieved this by adding the following snippet to my .scss file. ::ng-deep .cdk-overlay-pane { transform: translate(78%, 10%); } However, ...

cssangularsassangular-material

Having trouble aligning two divs on the same line and adjusting the controls to expand their width when there is extra space

I am currently creating an application using React and Material UI, incorporating the autocomplete control feature. Take a look at the code sandbox I have set up. Here are some concerns: I am aiming to have two autocomplete controls displayed on the same ...

cssreactjsmaterial-ui

Issues with Ajax response causing PHP and HTML submit button to not function properly

When I have an input on my webpage that is linked with AJAX, it searches for a name in the database and returns the result as an HTML form with values from the database. However, the submit button within the form is not functioning properly. Here is a sni ...

phpjqueryhtmlajaxsubmit

When the forward button is pressed multiple times in the carousel, the alignment changes

I recently noticed that the alignment of my carousel gets disturbed when I repeatedly click the forward button (>). How can I ensure that the carousel moves smoothly one item at a time when I click the forward or backward buttons? <div class="contai ...

javascriptcsstwitter-bootstrapbootstrap-4

What is the best way to incorporate a gratitude note into a Modal Form while ensuring it is responsive?

Currently, I have successfully created a pop-up form, but there are two issues that need fixing. The form is not responsive. After filling/submission, the form redirects to a separate landing page for another fill out. Expected Outcome: Ideally, I would ...

javascripthtmlcssresponsive-designmodal-dialog

Combining ng-repeat with the float property set to left

I am attempting to create two rows of divs using ng-repeat. Each div is styled with a float: left attribute, and at the end, I add a clearing div with clear: both. <div class="interval" ng-repeat="interval in intervals"> <div class="text-cen ...

htmlcssangularjs

`Erase content from a field once text is typed into a different field`

I have a Currency Converter with two input fields and a button. I enter the amount to be converted in the first field, and the result of the conversion appears in the second field. My question is: How can I automatically clear the second field when I type ...

javascriptc#htmljquerycss

Enhance the speed of webview on Android devices

I have been working on an application that utilizes a webview to load both HTML and JavaScript files. Unfortunately, I have noticed a significant decrease in performance when displaying the content. Despite trying various solutions such as: webVi ...

javascriptandroidhtmlwebview

Utilize focusout and onclick events on multiple components at the same time

Currently, I am in the process of coding an Autocomplete feature from scratch in Vue, but I am encountering a challenge when it comes to selecting an option from the dropdown menu. I have set it up so that the dropdown is shown when the input is clicked ...

javascripthtmlvue.js

Tips for locating and clicking a specific table element using Selenium

Is there a way to dynamically click the link associated with the label in this specific td? I am able to locate the link using the onclick method, however, the label name changes periodically from HemoGlobin A1C to HGB A1c, etc. and there is no unique ID ...

pythonhtmlseleniumselenium-webdriver

Tips on how to make a <li> element float independently without impacting other elements on the page

I have a dilemma with two divs in my HTML code. One is designated for the menu, and the other is simply for the title. The issue arises when I attempt to float the <li> items next to each other within the menu; they end up shifting downwards from the ...

csscss-float

Using Array Data Format to Customize Color in Highcharts Funnel Chart

I have included the funnel visualization code that I've been working on. $(function() { var dataEx = [ ['1 Visit', 352000], ['2 Visits', 88000], ['3+ Visits', 42000] ], len = dataEx.length, ...

javascriptjqueryhtmlcsshighcharts

When resizing an anchor tag with a percentage in CSS, the child image width may not scale accordingly

In short, I have multiple draggable images on a map enclosed in anchor tags (<a><img></a>) to enable keyboard dragging. The original image sizes vary, but they are all too large, so I reduced them to 20% of their original sizes using the ...

javascripthtmlcss

Using Regular expressions in JavaScript to eliminate content between two HTML comment tags

I am currently dealing with two HTML comments in this format: <!--Delete--> Blah blah blah blah <!--Delete--> I need to remove these comments, along with any characters and newlines. I am utilizing JavaScript and Grunt for this replacement ta ...

javascripthtmlregexgruntjs

The close button is not functioning properly

I created a script to close my div element by clicking on the 'x' icon, but instead of deleting the div only, the whole page gets deleted. I'm not sure where I went wrong, can anyone help me? HTML <div class="note"> <span id ...

javascriptjqueryhtmlcss

Maintain scroll position during ajax request

I am working on a single-page website that contains numerous containers. Each container's content is loaded dynamically via ajax, so they may not all be populated at the same time. These containers have variable heights set to auto. The website uti ...

javascriptjqueryhtmlcss