What is the best way to adjust the height of a div based on its child content

I've been experimenting with various methods to extend the white background around the title to cover the rest of the content. I've tried using overflow, clear, min-height, max-height, and even the '*' selector but nothing seems to work.

<html>
<head>
    <title>Ventura County CEC</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="global.css">

    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            min-height: 100%;
        }
        #courseContainer
        {
            width: 960px;
            background-color: #ffffff;
            position: relative;
            margin: 0 auto;
            height: *;
            /*min-height: 1610px;*/
            padding-left: 15px;
            padding-right: 15px;
        }

        #courses
        {
            position: absolute;
            top: 221px;
            height: *;
            width: 960px;
            border: 1px #cccccc dotted;
            border-radius: 4px;
            /*height: -moz-calc(* + 3px);
            height: -webkit-calc(* + 3px);
            height: -o-calc(* + 3px);
            height: calc(* + 3px);*/
            padding-bottom: 3px;
            background: #ffffff;
        }

        /*#superCourses
        {
            background: #ffffff;
            width: 960px;
            height: *;
        }*/

        .course
        {
            position: relative;
            height: 120px;
            width: 952px;
            margin-top: 3px;
            margin-left: 3px;
            border: 1px #cccccc dotted;
            border-radius: 4px;
        }

        .course_title
        {
            position: absolute;
            left: 5px;
            width: 150px;
            height: 120px;
            line-height: 100px;
            text-align: center;
        }

        .titleAlign
        {
            display: inline-block;
            vertical-align: middle;
            line-height: normal;
        }

        .course_description
        {

            position: absolute;
            left: 150px;
            top: 10px;
            bottom: 10px;
            width: 340px;
            height: 100px;
            overflow: auto;
            z-index: 5;


        }

        .course_pics
        {

            position: absolute;
            left: 450px;
            height: 110px;
            width: 100px;
            margin-top: 5px;

        }

        .picture
        {

            position: absolute;
            height: 110px;
            width: 250px;

        }

        .course_ment_loc
        {
            position: absolute;
            right: 5px;
            top: 10px;
            width: 200px;
            text-align: center;
            vertical-align: middle;
            height: 110px;
        }

        .teacher
        {
            top: 0px;
        }

        .school
        {
            position: absolute;
            bottom: 0px;
        }

    </style>
</head>

<body>
    <div id="courseContainer">

        <?php include 'title.php';?>
        <div id="superCourses">
            <div id="courses">

                <div id="list">
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                    <?php include 'CECCourses/courseTemplate.php';?>
                </div>

            </div>
        </div>
    </div>
</body>

Answer №1

It seems like the #courses div is positioned absolutely, causing the background not to cover the entire element.

To fix this issue, try removing the position: absolute; from the element. It appears that the position style for #courses is defined twice - once in global.css and once in courses.php.


Edit:

If the positioning of #courses is necessary for other pages and global.css cannot be modified, you can simply adjust the styles in courses.php to change #courses to be relatively positioned:

#courses
{
    position: relative;
    top: 221px;
    height: *;
    width: 960px;
    border: 1px #cccccc dotted;
    border-radius: 4px;
    /*height: -moz-calc(* + 3px);
    height: -webkit-calc(* + 3px);
    height: -o-calc(* + 3px);
    height: calc(* + 3px);*/
    padding-bottom: 3px;
    background: #ffffff;
}

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

What is the best way to create a responsive menu in code?

I am working on creating a responsive menu. Check out cuppcomputing For the desktop version, the whole panel will be displayed when it meets the max-width: 600px (tablet and mobile size). Initially, only the title is shown, and clicking on it will reveal ...

Is there a way to command Chrome or Firefox to execute JavaScript or load a Bookmarklet directly from the command line?

Is there a way to execute javascript in the current browser window through the command line, either in Chrome or Firefox? Or is it possible to load a bookmarklet that includes javascript? I'm interested in creating a program that can monitor changes ...

Navigation that remains fixed while scrolling

Can someone help me fix the side navigation of this template to stay fixed when a user scrolls past it for easier navigation? I'm struggling with the code and could use some fresh eyes to look at it. I just can't seem to figure it out on my own, ...

How can one use Selenium to verify the existence of an element on a webpage?

Currently, I am developing a program in Selenium with Python and facing an issue. During the test execution, there is a possibility that a button may or may not appear on the webpage based on an unknown parameter. The relevant HTML tag for this button is ...

What is the method for selecting the element currently under the mouse cursor?

Is it possible to change the color of all elements you hover over using plain Javascript without jQuery? HTML <ul> <li></li> <li></li> <li></li> </ul> JavaScript (function() { var item = ...

Is Safari causing issues with the CSS slider animation?

Currently, I am working on implementing a CSS-only slider (no jQuery) in WordPress using the code from this source: http://codepen.io/dudleystorey/pen/kFoGw An issue I have encountered is that the slider transitions are not functioning correctly in Safari ...

Trouble displaying data with Angular 6 JSON object pipe

Having an issue with displaying tasks from a MongoDB project schema in HTML. The tasks are stored in a nested array and I want to show the task name and description. Here's the code: <div class="card-body"> {{project.taskName | json}} </ ...

Is concealing a button an effective strategy?

Recently, I decided to design a login form for my website. To quickly style the form, I opted to use Bootstrap through CDN. While working on the form, I encountered an issue with the button size as the device width changed. Initially, I applied the classes ...

Unable to show the name of the chosen file

After customizing the input [type = file], I successfully transformed it into a button with a vibrant green background. Here is the code snippet that enabled this transformation: <style> #file { height:0px; opacity:0; } ...

Leveraging background images in HTML and CSS to create interactive clickable links

I'm attempting to create the illusion of a clickable background image using HTML and CSS, following a tutorial I found here. Unfortunately, I'm encountering two issues: 1) The link is not fully covering the background image 2) The link does not ...

Chrome is having trouble displaying Roboto font correctly

I have been experiencing an issue with the rendering of the Roboto font on a client's website. When I view the site in Chrome (version 43.0.2357.65 m), all the different weights of Roboto appear to look the same. For example, here is a comparison: On ...

I'm encountering difficulties with customizing the root styling of material-ui's DialogActions

Check out the two buttons in a DialogActions just like this. This is the JSX snippet I'm working with: <DialogActions classes={{ root: classes.dialogActionsLeft }}> <Button autoFocus onClick={() => { setOpen(false); }} ...

Rapid processing of JavaScript upon page load

I recently implemented a dark mode feature on my WordPress site. Here are the four modes I included: 1- Automatically based on user's system settings 2- Light mode 3- Semi-lit mode 4- Dark mode The implementation is in place and functioning perf ...

Getting the value from a label and then setting it as the innerHTML of document.getElementById('label')

I have successfully implemented a JavaScript Google Maps functionality, but now I am facing an issue where I need to retrieve the type of HTML control and set it to JavaScript. Specifically, when attempting to extract the value from lblTitle, it is not f ...

Tips on utilizing jquery slideDown alongside appendTo

I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this. Below is the ajax metho ...

Guide on how to gather values into a variable from the DOM using jQuery

Trying to make this function: The current issue I'm facing is that when changing a digit (by clicking on a hexagon), I want to save the selected number as the value of a hidden input field next to the digit in the DOM. Any ideas on how to achieve th ...

iPad screen not displaying overflow for x and y axis

I'm encountering an issue with displaying the scrollbar on a div while using an iPad device. Currently, I am utilizing: -webkit-overflow-scrolling: touch; Although this is functioning properly, my goal is to have the scrollbar visible without the ...

Error messages are being generated by Angular CLI due to an unclosed string causing issues with the

After incorporating styles from a Bootstrap theme into my Angular 8 project and updating angular.json, I encountered a compile error displaying the following message: (7733:13) Unclosed string 7731 | } 7732 | .accordion_wrapper .panel .panel-heading ...

Enable or disable options with the user's permission

Currently, I am developing a WordPress plugin that will display a simple div on all pages. The code is set up to create the div, turn it into a shortcode, and then show it on each page. I want to include a checkbox in the admin settings so that users can ...

Electron triggers MouseLeave event on child elements

Dealing with mouse hover events can be a bit tricky, especially when working with AngularJS in an Electron-hosted app. Here's the HTML template and script I'm using: HTML: <div id="controlArea" (mouseenter) = "onControlAreaEnter()" ...