CODEWITHSUNDEEP
htmlcss
TCM
TCM

Reputation: 16900

simple html problem frustrating me

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>

Upvotes: 1

Views: 138

Answers (4)

user520023
user520023

Reputation:

Problem was in messy align="left" property in table tag. See normal version: http://www.jsfiddle.net/pereskokov/UMUFt/1/

Upvotes: 3

ajcw
ajcw

Reputation: 23804

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/

Upvotes: 3

ArBR
ArBR

Reputation: 4082

First of all you are specifying the Transitional DTD level which is the highest level and requires apart of well formed document, that you use only HTML elements winch are accepted for such level, second you have a div that is closed but not opened, third remove the align="left" attribute of your table:

<div style="margin-top: 10px;font-family: helvetica,sans-serif;color: white; background:#212121;"  
       <center>
       <h4 style="font-family: Verdana;font-style: italic;">Title</h4>
       </center>
    <div style="margin-left: 10px; " > 

     <table border="1" cellpadding="0" cellspacing="0">
      <tr><td/>Cell Content</td></tr>
     </table>
</div>

Upvotes: 1

Aditya Hadi
Aditya Hadi

Reputation: 384

May I know the round class? I think the div is floated. When you use float div, you need to "clear:both" the div to clear the float element so the other tag won't float too.

Upvotes: 1

Related Questions