Member Avatar for chaitu11 
<html>
<head>
<link rel="stylesheet" href="css/template.css"/>
</head>
<body>
<div id="maindiv">

    <div id="top_bar">
    <div id="logo"><img src="img/avatar2.png" width="32px" height="32px"></div>
    <div id="settings"><img src="img/avatar2.png" width="32px" height="32px"></div>
    </div><!---topbar--->

            <div id="container">
                <div id="leftpanel">
                <table border="1px" align="center" class="edit">
                <tr>
                <td> Edit </td>
                <td> view </td>
                <td> Delete </td>
                </tr>
                </table>
                <table border="1px" align="center" class="leftmenu">
                <tr><td>tab1</td></tr>
                <tr><td>tab2</td></tr>
                <tr><td>tab3</td></tr>
                </table>
                </div>

            <div id="rightpanel">
            <table>
            <tr><td>Bag</td></tr>
            <tr><td>Mobile</td></tr>
            <tr><td>Smart Phone</td></tr>
            <tr><td>Laptop</td></tr>
            <tr><td>Bike</td></tr>
            <tr><td>Gold</td></tr>
            <tr><td>Alto Car</td></tr>
            <tr><td>Swift Car</td></tr>
            <tr><td>Vernam Car</td></tr>
            <tr><td>Ford ecosport Car</td></tr>
            <tr><td>Innova Car</td></tr>
            <tr><td>Duplex Car</td></tr>
            <tr><td>Retirement</td></tr>

            </table>
            </div>


            </div><!---container-->
            </div><!-----maindiv--->




            </body>
            </html>
Edited by Dani because: Formatting fixed
  • 2 Contributors
  • 1 Reply
  • 222 Views
  • 40 Minutes Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

The container collapsing is almost always a layout/flow issue in the stylesheet rather than the HTML. As noted, the missing CSS is the key. Common causes are child panels taken out of normal flow (floats or absolute positioning) or margin-collapsing on the first child. The following quick diagnostics and fixes address those root causes and will make the parent (#container) grow to contain #leftpanel and #rightpanel.

Diagnostics (use browser devtools)

  • Inspect #container’s computed height and the computed position/float of the child panels.
  • Temporarily give the container and panels visible backgrounds/borders so their boxes are easy to see.
  • Toggle float or position:absolute in devtools to confirm whether removing the float/absolute makes the container expand.

Robust fixes (pick one)

  • Clearfix pseudo-element (preferred for float layouts)
#container::after {
  content: "";
  display: table;
  clear: both;
}
  • Create a new block formatting context
#container { overflow: auto; }    /* or overflow: hidden; */
  • Use modern layout (avoids floats entirely)
#container { display: flex; }     /* or display: flow-root; */

Notes and cautions

  • overflow:hidden will clip overflowing content; overflow:auto may add scrollbars. Both create a new BFC and clear floats.
  • display:flex changes layout behavior (children become flex items) — suitable if horizontal side-by-side panels are intended.
  • If the issue is margin collapse (first child’s top margin appearing outside the parent), add padding-top:1px or a transparent top border to the parent, or use the clearfix/flow-root fixes above.

These techniques are standard and safe; applying one will usually resolve a container that appears not to “cover” its child panels.

Member Avatar for JorgeM

Just posting your HTML doesn't provide enough info as to what the problem is.

Is the style sheet accessible online or could you post the relevant styles.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.