What is causing my two divs to fail in expanding to the full height of the parent div?

HTML:

            <div id="main" class="rounded-corners">

                <div id="benefits">

                    <img src="/benefits-heading.png" style="padding: 30px;" />

                    <div id="corporateside">
                        <h1>Corporate Benefits</h1>    
                        <p>blah</p>
                    </div>

                    <div id="employeeside">
                        <h1>Employee Benefits</h1>
                        <p>blah</p>
                    </div>

                </div>

            </div>

CSS:

#corporateside { width: 420px; padding: 20px; height: 100%; display: block;  }
#corporateside h1 { font-size: 24px; font-weight: 500; }
#corporateside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#corporateside p { padding: 0px; margin-top: -10px; }
#employeeside { width: 420px; padding: 20px; height: 100%; display: block;  }
#employeeside h1 { font-size: 24px; font-weight: 500; }
#employeeside h2 { color: #cc0000; font-size: 18px; font-weight: bold; text-transform: uppercase; padding-top: 10px; }
#employeeside p { padding: 0px; margin-top: -10px; }
#benefits { position: relative; height: auto; }
#main { width: 940px; height: auto; background-color: #ffffff; margin: 0 auto; padding: 0; background: #ffffff; border: 2px solid #ffc40d; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }

I have made some improvements by simplifying the structure and styling. Thank you for your assistance!

Answer №1

The reason for the issue is due to the divs being styled with position: absolute;. This causes the divs to be removed from the usual document flow, resulting in the containing element not accounting for their presence during layout.

If you are looking to adjust the position of the divs, I would recommend trying to use position relative or checking their margins and padding. Additionally, utilizing a CSS reset can help create consistent layouts, especially across different browsers.

I have created a jsfiddle demonstrating my suggestion, with the divs positioned side by side and the container behaving as intended. http://jsfiddle.net/wCnLZ/

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

Using Rowspan in Bootstrap 4 Beta 0 Grid System

Hey there, currently I'm working on an eCommerce template using Bootstrap 4 Beta. While I managed to get it working smoothly on mobile devices, I've run into a snag on desktop. I can't seem to figure out how to keep the Buy Box positioned un ...

Arranging divs within list items in a single row

My goal is to create a dropdown menu within an <li> element of <ul>. Here's what I have so far: HTML: <ul class="navigationTable"> <li>1</li> <li>2</li> <li><div id="comittee"> <div id= ...

The dropdown menu is extending outside the header in a right-to-left (RTL) direction

I have implemented the jQuery code below to prevent the dropdown from extending beyond the header area. It works perfectly in the normal LTR version. However, I need a solution for the RTL version. How can I achieve this? jQuery $('.primary-menu .dr ...

Modifying the Vue page background directly from a page: a step-by-step guide

UPDATE: I recently discovered that I need to modify the body background-color, but I am unsure of how to accomplish this from within the style of this page based on the wrapper's class. The class is determined by the data values. I aim to change the ...

Blazor Control in Razor Component Library (CSS Protection)

I recently created a new component named MyComponent.razor and included a corresponding CSS file called MyComponent.razor.css. The CSS file is nested under the component file in Visual Studio, so I am confident there are no spelling errors in the file path ...

Is it necessary to include the Roboto font when using MUI?

After reviewing the Material UI documentation, it appears that users are responsible for loading the Roboto font: Material UI is designed to use the Roboto font by default. You may add it to your project with npm or yarn via Fontsource, or with the Googl ...

Discover the art of implementing linear gradient backgrounds in Tailwind css effortlessly

Is there a way to incorporate this specific color scheme into my background? linear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%) I have knowledge on how to implement this color using regular CSS, but I'm curious about how it can ...

Renew The Dining Surface

I am looking for a way to update the table content without refreshing the entire page. I am using HTML, CSS, and JavaScript to display the current data from my sqlite3 database. Any tips on how to achieve this would be appreciated. ...

children in CSS grid expanding beyond grid boundaries

I am facing a challenge with my grid layout where the children's content needs to be scrollable. The grid is sandwiched between a header and footer, as illustrated below: <div class="app"> <div class="header"> Header </div> ...

The issue with the page width is occurring due to a bug related to the

When pages contain the AddThis code, they tend to become very wide due to the code itself, resulting in a horizontal scroll bar appearing. However, by removing the code or changing the page direction to LTR, the issue is resolved and the page width return ...

Combining different HTML table borders

Here is some example code: <!DOCTYPE html> <html> <body> <h4>Creating a table with nested tables:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td> </td> < ...

What is the best way to showcase 100 json data entries within an HTML document?

Starting from scratch with html, css, and javascript, I've embarked on a basic learning project. Within this project, I plan to create two main pages: a list page and a detail page. The list page will showcase posts on the html screen, featuring only ...

Is it possible to arrange JSON Objects vertically on a webpage using tables, flexboxes, divs, and Javascript?

Within my JSON data, I have multiple products defined. My goal is to loop through this JSON and display these products side by side on a web page for easy comparison. Initially, I envision structuring them in columns and then rows: https://i.sstatic.net/K ...

Adjust the background image color with CSS styling

I have a collection of icons that I would like to incorporate into my application. These icons primarily consist of glyphicons with a few others mixed in. I want the HTML structure to mimic that of a glyphicon, specifically: <a href="#"> <spa ...

Incorporating Tabs with HTML, CSS, and jQuery

After searching for a way to enable tab selection on click within my HTML fragment representing a tabbed interface, I was unable to find a solution. I resorted to manually programming it using JavaScript, which did work, but I feel there must be a more p ...

Is there a jQuery or Javascript alternative to CSS Counter?

Can a counter be implemented that changes the text of a tag directly using jQuery/Javascript? For example, if there were two tags like this: <a>hello</a> <a>bye</a> After executing the jQuery/JS function, the result would be: < ...

Validating the similarity of classes with JQuery

Currently, I am working on creating a quiz game using HTML, CSS, JQuery, and potentially JavaScript. I am looking to implement an if statement to check if a dropped element is placed in the correct div (city). My approach involves utilizing classes to comp ...

Div Boxes at the Center

I've searched extensively for a solution to my unique problem, but haven't been able to find one that fits. I have 4 div boxes with a max width of 50% and a min width of 400px. When the site is viewed on a smaller screen, I want the boxes to alig ...

CSS: The relative positioned element now functions correctly with the inclusion of overflow-x

Is there a way to ensure that the images in the day_time_block cover the title class? I would also like all contents within the day_time_block to be displayed using overflow-x. However, when I add overflow-x: auto; to the scroll div, the images in the d ...

Customizing HTML element tags in MUI: Best practices

Using the most recent version of MUI (v5) and incorporating CssBaseline from @mui/materials. Typically, in CSS, I would set up my styles like this: body, html, #root { width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; font-siz ...