Home/ Questions/Q 3442370
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T08:39:37+00:00

Why is my gray div only showing half? This is my code :- <!DOCTYPE

  • 0

Why is my gray div only showing half? This is my code :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<body>
<div style="margin-top: 10px;font-family: helvetica,sans-serif;color: white;background: #212121;" class="round"  >
    <center>
        <h4 style="font-family: Verdana;font-style: italic;">Alumni Activities</h4>
    </center>
    <div style="margin-left: 10px;">
        <p>

            The institution has an alumni association that performs various activities to disseminate knowledge among  students regarding Education, Technology, Trends and Industry. Apart from this, it organizes technical competitions for students to effectively develop their competitive skills and arranges alumni programs that promote effective networks amongst its members.</p>
        <p>
            Events organized by Alumni Association of  are as given below:</p>
        <table align="left" border="1" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top" width="40">
                        <p>

                            1.</p>
                    </td>
                    <td valign="top" width="363">
                        <p>
                            <strong>Event Name: </strong>Alumni Meet 2010</p>
                        <p>
                            <strong>Date of Event: </strong> 27-Feb-2010</p>

                        <p>
                            <strong>Purpose: </strong> Annual General Meeting and Get together</p>
                        <p>
                            <strong>Number of Alumni Present: </strong> 75</p>
                    </td>
                </tr>

                <tr>
                    <td valign="top" width="40">
                        <p>
                            2</p>
                    </td>
                    <td valign="top" width="363">
                        <p>
                            <strong>Event Name: </strong> Expert Talk</p>

                        <p>
                            <strong>Name of the Alumni: </strong> Mr. Nachiket Patel, Essar Ltd.</p>
                        <p>
                            <strong>Date of Event: </strong> 22-Sep-2009</p>
                        <p>
                            <strong>Purpose: </strong> To enhance the knowledge of students</p>

                    </td>
                </tr>

        </table>
        <p>
            &nbsp;</p>        </div>
</div>
</div>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks to me like the classic ‘collapsed parent’ problem, created by a floated element. In your case it’s the align=left attribute on the table.

    Removing this attribute is the easiest solution, otherwise there are four CSS solutions, although one of the main two should work for you:

    Either add the css overflow:hidden to your main div, or add a clear float, e.g. <div style="clear:both;"></div> as the last thing inside your main div.

    This article explains the theory and the other two possible solutions:

    http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

    • 0