The parent div does not include the child div, and the height:auto is 0

Hi, how are you?

I am a student who is currently working as an intern part-time job to produce a web page.

As you can see, there is a problem that the height of the parent div becomes 0. However, I don't know why this phenomenon occurs when the height of the children divs is not seen because they are crushed to zero.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="tag" tagdir="/WEB-INF/tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Just feel it spouting</title>
    <tag:headerS/> <!--Tags containing js and css files -->
</head>

<body>
    <jsp:include page="/jsp/interface/header.jsp" flush="false" />
    <!-- This is a jsp with a title at the top of the page, a login window, and a menu -->

    <divid="layout_content"> <!--Parent of the problem div -->

        <div class="fl mr20" style="Margin-bottom: 36px;"> <!--Child div 1 -->
            <form name="insertForm" action="/rowsCopyInfo/insert">
                <table class="pure-table pure-table-bordered">
                    <tr>
                        <th class="bold">Company Name</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                    <tr>
                        <th>Call number</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                    <tr>
                        <th>Service classification</th>
                        <td><label><input type="checkbox" name="/> Boom Boom </label>
                        <label><input type="checkbox" name="/> Boom</label></td>
                    </tr>
                    <tr>
                        <th>Certification classification</th>
                        <td><label><input type="checkbox" name="/> Boom Boom </label>
                        <label><input type="checkbox" name="/> Boom</label></td>
                    </tr>
                    <tr>
                        <th>Service Code</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                </table>
                <br />
                <table class="pure-table pure-table-bordered">
                    <tr>
                        <th class="bold">Basic comments</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                    <tr>
                        <th>Listen Again</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                    <tr>
                        <th>If entered incorrectly</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                    <tr>
                        <th>Timeout</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                    <tr>
                        <th>On 3 errors</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                    <tr>
                        <th>Authentication Success</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                    <tr>
                        <th>Authentication Failure</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                    <tr>
                        <th>Cancel</th>
                        <td><input type="text" name="" /></td>
                    </tr>
                </table>
                <br /> <input type="submit" />
            </form>
        </div>

        <div class="fl guide" style="Margin-bottom: 36px;"> <!--Child div 2 -->
            <p>Service Code must not be duplicated.
            <br>In front of you, I'll give you Bboom Bboom</p>
        </div>

    </div>

    <tag:footer/> <!-- Tag with company information and copy light. -->
</body>
</html>

common.css

/* omitted */

.fl { float:left; }
/* Omitted */
.mr20 { margin-right:20px !important; }

/* To utilize the .fl, .mr20 classes that were originally in css,
jsp did not apply style or create a new class. */

/* Omitted */
#layout_content {
    clear:both;
    margin:36px 0 36px;
    padding:0 10% 0;
    color:#333;
    width:80%;
    /* If you don't add anything here, or if you write height: auto;, the height is 0px
    height: If you add 100%, the height is 37px. */
    }
    #layout_content .guide{
        width:200px;
        border-style: solid;
        border-width: 5px;
        border-color: #f00;
        padding:12px 12px 12px;
    }

/* Omitted */

There is a way to give a fixed height to the parent class, but I didn't use that method because I thought it would be a problem that the height would not increase when the window narrows.

It is assumed that the problem occurs because the child div is not included in the parent div I'm looking mainly for that, but I haven't found an answer yet. What's the problem?

css div

2022-09-22 19:11