Increase the height of the parent div and adjust the height of the other child div to match the height of the larger child div

I currently have a setup with four divs on my asp.net page: div7_1 (parent), div4_1, div11_1, and div6_1 as child divs. Here is how it looks:

HTML 

<div id="div7_1">
   <div id="div4_1">                    
   </div>
   <div id="div11_1" runat="server">                    
   </div>
   <div id="div6_1">
   </div>               
</div>

CSS

#div4_1{display:table-cell; width:215px; min-height: 450px; top: 0px; float: left; background-color: #cc9933; text-align: center; border: 2px solid #999;}
#div6_1{display:table-cell; width: 185px; min-height: 450px; float: right; top: 0px; right: 0px; background-color: #cc9933; border: 1px solid #999;}
#div7_1{ position: relative; overflow: hidden; display: table; width: 1200px; min-height: 450px; top: 5px; left: 0px; padding-top: 0px;}
#div11_1{display:table-cell; float: left; padding-left: 5px; margin-left: 5px; width: 65%; min-height: 450px; top: 0px; left: 0px; border: 3px solid #999;}

I am looking for a way to make the parent div expand its height to match the child div with the greatest height, and adjust the other child divs accordingly. Any suggestions on how to achieve this? Also, I suspect there might be some redundant lines in the CSS, so feel free to point them out.

Thank you.

htmlcss

Answer №1

If you're wondering why the divs are floating, consider using display:table-cell on both to meet your requirements.

JSfiddle

CSS

#div7{position: relative; 
    overflow: hidden; 
    display: table; 
    min-height: 450px; 
    top: 5px; 
    left: 0px; 
    padding-top: 0px;}
#div4{display:table-cell; 
    width: 245px; 
    background-color: #cc9933; 
    text-align: center;
    height:150px;
}

#div11{
    display: table-cell;
    position: relative;     
    padding-left: 5px; 
    margin-left: 5px; 
    width: 57%; 
    background-color: yellow;
}

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

How can I prevent a browser from allowing users to select an image tag?

I'm dealing with an issue on my webpage where I have an image that is inadvertently picking up mouse clicks, causing the browser to perform drag and drop actions or highlight the image when clicked. I really need to use the mousedown event for somethi ...

javascripthtmldom

I am interested in using an image upload box that includes a hidden input field. However, I have encountered issues with the functionality when the input field is hidden. Does anyone have any suggestions on how

I have limited experience and need some assistance with resolving this particular issue. I am looking to create an image upload box that works when clicked on the input field. Thank you in advance. function readURL(input) { if (input.files && ...

javascripthtmlcss

Cursor hovers over button, positioned perfectly in the center

I am facing a challenge with implementing a hover function for a set of buttons on the screen. The goal is to display the mouse pointer at the center of the button upon hovering, rather than the actual position of the cursor being displayed. I have tried u ...

javascriptjquerycsspointerlock

Creating a cohesive layout with Bootstrap 4: aligning text elements in relation to one another

Can someone help me with this code snippet I have? <div class="container"> <div class="border rounded-lg" style="height:500px;"> <div class="ml-2 mt-2"> <h1 class="display-3">@Model.Name</h1> ...

htmlcssbootstrap-4

Generate HTML tags dynamically within a JSON document using PHP

Is there a way to incorporate HTML markups (generated dynamically by a CMS) into a JSON file? I am aware that in the html string, one must escape double quotes by adding "" as shown below. { "title": "Title", "da ...

javascriptphphtmljson

How to reposition a DIV element using CSS only

I'm facing a challenge where I need to relocate a DIV element to the bottom of the body without altering the HTML structure. I tried referring to some existing threads for solutions, like this one on Stack Overflow: Moving a div from bottom to top, us ...

htmlcssbootstrap-4

AngularJS input range is written inside the bubble that crosses over the screen

Is there a way to write inside the bubble of the range slider? I have adjusted the design of the range slider and now I simply want to display the number inside the bubble: Please see image for reference I aim to display the number inside a circle. What ...

javascriptcssangularjsangularjs-scopeangular-ui-bootstrap

Flex columns with flex items of equal height

I am attempting to create a layout where list items within a column have equal heights. Below is my current code: <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> ol { ...

htmlcssflexbox

What is the best way to showcase two data frames side by side in an HTML template or webpage without using frames?

Is there a way to showcase two data frames side by side in an html template? <h3> TITLE </h3> {{stat1 | safe}}. {{stat | safe}} I attempted the above solution, but unfortunately it only displays the data frames vertically stacked instead of ...

pythonhtmlpython-3.xflaskjinja2

Switch up the Thumbnail Image based on the selected category

While testing a shopping site I created, I encountered an issue with changing the banners at the top of the page based on the category the user is viewing. This site is hosted on a server on my localhost, not using wordpress by the way. <div class=" ...

javascriptphphtmljquerycss

Stop the CSS animation when the cursor leaves and resume from the same position

I'm currently working on implementing a SVG path animation that activates on hover and reverses when the mouse is moved away. How can I pause the animation if the mouse moves out before the initial animation completes, and then reverse it from that p ...

jqueryhtmlcssanimationsvg

Center the ASP menu horizontally on the page

I'm having trouble centering the menu bar horizontally. The number of main menu items can change with each user login. Currently, the menu bar is starting around 30% from the left. I have attempted using display: inline-block and display: table for #m ...

htmlasp.netcss

How can I ensure my card div is responsive in Bootstrap?

My current section consists of only 6 cards, with 3 cards in a row of 2. When the screen size reduces (to mobile phone size), I want each card to be on its own row, displaying one by one as the user scrolls. Although it functions as desired when I resize ...

htmlcssresponsive-designbootstrap-5

Display v-select options by clicking a button

I am trying to figure out a way to make the vuetify v-select component appear when I click on an icon button. The v-select should remain hidden when closed, only visible when triggered by clicking the button. It's like having the button toggle the vis ...

htmlvue.jsvuetify.jsv-select

What is the best way to resize images to fit in a 200 pixel square box using CSS?

I have a collection of images that all fit within a 400px × 400px box, with one dimension being 400px and the other smaller. I want to resize these images using CSS or jQuery/JavaScript if necessary, to fit into a 200px by 200px box. The goal is to have t ...

javascriptcssimagebounding-box

Show Hindi content in Android web browser

I am currently developing an application that requires displaying Hindi text in an HTML format. I need to display an entire HTML page with content in Hindi. Can someone assist me with this? Any help would be greatly appreciated. Here is a snippet of my cod ...

androidhtmlhindi

Using the innerHTML property to place an Img tag within a div element

I'm facing an issue with including multiple tags within a div using innerHTML. To better illustrate my problem, here's an example: var y = "jack.jpg"; var x = "Jack"; var f = "Hello world!"; document.getElementById("maindDiv").innerHTML += "< ...

javascripthtml

Within the flask framework, I am experiencing an issue where paragraphs are being overwritten. My goal is to find a

Snippet of HTML: <div class="split left" > <div class="centered"> <div class="container"> <p>Hi!</p> </div> <div class="darker"> <p>{{message}}& ...

pythonhtmlcssflaskjinja2

What is the best way to identify a modification in a select element within React?

My HTML form has a dropdown menu for users to select colors, and I'm attempting to determine when a new color is chosen. Despite adding the `onchange` attribute with a `console.log()` function, nothing appears in the console when I pick a different co ...

javascripthtmlreactjshtml-select

Safari compatible JavaScript needed for enforcing required fields in HTML5

I have been using the following script to adjust the HTML5 required attribute of my input elements. However, I am now looking for a way to tweak this script so that it can also function properly in Safari browsers, where support for this attribute may be l ...

javascriptphpjqueryhtml