The concept of Nested DIVs and their impact on Element Height

Trying to divide this page into blocks with checkbox options in a 4x3 layout. The issue is that setting the "columns" to 100% height makes it 100% of the parent's parent, not the parent div. Any suggestions?

<div id="left" style="width:50%;height:100%;display:inline;float:left">
    <div id="leftRow1" style="width:100%;height:30%;display:inline;text-align:center">
        <div id="column1" style="width:50%;height:100%;display:inline;text-align:left;float:left">
            <h3>Appliances</h3>
            <div>
                <input id="dishwasher" class="css-checkbox" type="checkbox">Dishwasher
            </div>
            <div>
                <input id="dryer" class="css-checkbox" type="checkbox">Dryer
            </div>
            <div>
                <input id="freezer" class="css-checkbox" type="checkbox">Freezer
            </div>
            <div>
                <input id="garbage" class="css-checkbox" type="checkbox">Garbage
            </div>

        </div>
        <div id="column2" style="width:50%;height:100%;display:inline;text-align:left;float:right">
            <h3 style="color:white">.</h3>
            <div>
                <input id="microwave" class="css-checkbox" type="checkbox">Microwave
            </div>
            <div>
                <input id="range" class="css-checkbox" type="checkbox">Range/Oven
            </div>
            <div>
                <input id="refridgerator" class="css-checkbox" type="checkbox">Refridgerator
            </div>
            <div>
                <input id="washer" class="css-checkbox" type="checkbox">Washer
            </div>
        </div>
    </div>
    <div id="leftRow2" style="width:100%;height:30%;display:inline;text-align:center">
        <div id="column3" style="width:50%;height:100%;display:inline;text-align:left;float:left">
            <h3>Basement</h3>
            <div>
                <input id="finished" class="css-checkbox" type="checkbox">Finished
            </div>
            <div>
                <input id="partialfinish" class="css-checkbox" type="checkbox">Partially Finished
            </div>

        </div>
        <div id="column4" style="width:50%;height:100%;display:inline;text-align:left;float:right">
            <h3 style="color:white">.</h3>
            <div>
                <input id="unfininshed" class="css-checkbox" type="checkbox">Unfinished
            </div>
            <div>
                <input id="none" class="css-checkbox" type="checkbox">No Basement
            </div>
        </div>
    </div>
</div>
htmlcss

Answer №1

The issue lies in the display: inline property. Initially, it was not obvious due to the inline styling. Height cannot be set for elements with a display of inline. Changing them to inline-block should resolve the problem.

Here is the updated demo for reference.

In addition, I have refactored your code by eliminating the inline styles and categorizing them into 3 classes: wrapper (outermost div), leftrow (your main divs - appliances and basement), and column (all inner divs).

For the corrected version, please see the fixed demo.

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

Is there a way to view images embedded in local .msg files in a web browser in HTML format?

Does anyone know how to display embedded pictures in local .msg files when opening them in a web browser using HTML format? Currently, when I open the .msg file with embedded pictures, all I see is a blank space indicating "picture not found." Interestin ...

htmlvb.netoutlookmsg

Combining Sass and SCSS in webpack: A step-by-step guide

Just curious about something. I have some libraries I'm interested in using (for example, font-awesome) that use scss, but I personally prefer working with sass. How can I set up my project with webpack to accommodate this? Here's my current s ...

cssreactjswebpacksasswebpack-style-loader

I am having trouble grasping the concept of CSS and the first-child selector

I am having an issue with the first-child selector in CSS. I have two divs with the same class, each containing an image and a paragraph element. When I use the .div-class:first-child {margin:10} rule, the margin is only applied to the paragraph in the fir ...

htmlcss

Tips for navigating an aframe scene on mobile devices

How can I enable scrolling over aframe on mobile devices? I attempted to disable the scene controls but scrolling still doesn't work; the scene keeps interacting instead. ...

htmlaframe

Retrieving data from an HTML webpage using VBA

In my attempt to access the "username" cell from a web page using VBA, I encountered an issue. The HTML code of the page contains multiple elements with the same name, "LOGON_USERID", making it challenging for me to identify and access the correct one. Hi ...

htmlvba

Need help using JQuery to set the focus on the initial <select> element on a webpage?

Upon loading the page, I am looking to set focus on the initial element through JQuery. So far, I have managed to achieve this by using: $(":input:visible:first").focus(); or $(':input:enabled:visible:first').focus(); as described in a helpf ...

jqueryhtml

Utilizing JavaScript in Protractor, explore a list to identify the selected checkboxes and those that remain unchecked

Currently, I am working on developing an end-to-end test using Protractor. My main objective is to extract the names from a list and then determine which checkboxes have been selected and which ones haven't. To check the state of the checkbox, I pla ...

javascripthtmlangularjsprotractor

Creating a custom transition rule in Stylus: A step-by-step guide

I need help creating a generic transition rule in Stylus. My current function is only working in specific cases, where it returns a string 'all ease-in-out 0.2s' instead of a proper CSS rule. This approach is not effective when trying to use it i ...

cssgenericsstylus

Ways to position the navigation menu alongside a search bar and a dropdown tab?

My navigation bar includes a search form, multiple links, and a dropdown link leading to additional links. Unfortunately, I'm struggling to align everything on the same line within the navbar. This is the current output: View My HTML Page Below is ...

javascripthtmlcssbootstrap-4

Idea: Develop a bookmarklet that generates a header form and deletes it upon submission

After much contemplation and experimentation, I have been grappling with the idea of creating a bookmarklet that displays a header when clicked on any webpage. This header will contain a small form that submits its contents to a server before disappearing. ...

javascriptjqueryhtmliframebookmarklet

Create HTML div elements dynamically with JavaScript based on database information

Can javascript be used to create divs from database information? ...

javascriptphphtml

JavaScript function unable to access static file for image

I need assistance with dynamically displaying an image (a checkmark or "X") based on a variable. When I insert the image using a script directly in the HTML file, it functions correctly. However, when attempting to set the image from within the createEasyD ...

javascripthtml

The function is not functioning correctly for every element within the array

I am currently developing a shopping cart that populates data from local storage. Here is a snippet of the code: var arrayLength = cartarry.length; for (var i = 0; i < arrayLength; i++) { var id = cartarry[i].id; var name = cartarry[i].name; ...

javascripthtmlarrays

Verify image loading using jQuery

<img src="newimage.jpg" alt="thumbnail" /> I am dynamically updating the src attribute of this image. Is there a way to verify if the image has been successfully loaded and take action once it is? Appreciate any guidance on this matter. ...

javascriptjqueryhtmlcss

The DIV with looping functionality is not maintaining the table structure from the previous view

I have a table with a lot of ordering details. However, when I try to add a product from the admin page, the original table structure works fine. But as soon as jQuery adds an extra DIV to expand the table, I encounter issues. Can anyone suggest a jQuery m ...

phpjqueryhtml

Transferring HTML table information to Django models for efficient data management

I am currently developing a student attendance management system using the Django framework. The objective is to fetch all the names of the students from the student database and display them in an HTML table. Additionally, I will be updating the informati ...

htmljquerydjangoajaxdjango-models

Conceal a list of items within a div that has a particular class

This is a sample of my HTML code: <div class="row"> <div class="col-md-12"> <div class="scrollbox list"> <ul class="list-unstyled"> <li id="articulate.flute">articulate flut ...

javascriptjqueryhtmlcss

Troubleshooting: Bootstrap 5.0 Navbar Dropdown Issue Unresolved

My navbar dropdown isn't working when clicked. I've searched for solutions without success. Is there a script missing? layout.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> ...

htmldjangobootstrap-5

Error: The Jquery plugin Object #<HTMLDocument> does not have a function called 'observe'

Hello, I recently tried to install the Jquery plugin known as chosen that allows customization of my <select> tag across different browsers. If you're interested, you can find more information about it here. However, after integrating this plugi ...

javascriptjqueryhtmljquery-plugins

Retrieving information from the query string and showcasing it on a client-side label

I'm facing an issue where I need to update a small part of text in a label based on the query string. The code snippet I am currently using is Text = "after 30 June "'<%=Request.QueryString ("Year")%>'" in the comments field" However ...

asp.nethtmllabelquery-stringclient-side