CODEWITHSUNDEEP
htmlcss
Zrb0529
Zrb0529

Reputation: 800

Content <div> background color is incorrect

I have the following HTML page and the background color for the content is not differentiating from the main body background color. I've been staring at this for over an hour and can't find the bug.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="twoColLiqLtHdr.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
</head>

<body>

<div class="container">
  <div class="header"><img src="logo.png" width="35%" height="90" style="background: #A9B92E; display:block;" /> 
    <!-- end .header --></div>

  <div class="sidebar1">
    <ul class="nav">
      <li><a href="home.php">Home</a></li>
      <li><a href="search.php">Search</a></li>
      <li><a href="codebook.php">Tag Codebook</a></li>
      <li><a href="articleadmin.php">Article Admin.</a></li>
    </ul>
    <p>&nbsp;</p>
    <!-- end .sidebar1 --></div>

  <div class="content">
      <form id="form" name="form" action="" method="post">
      <input type="hidden" name="id" value="<?php echo $id; ?>"/>
        <h1>Edit Details for &nbsp; &nbsp;<?php echo $articletitle; ?></h1>
        <table width="100%" border="0" cellpadding="6">
          <tr align="center" valign="middle">
            <td colspan="2"><legend>Article details</legend></td>
          </tr>
          <tr>
            <td width="26%" align="right"><span class="field">Article Title</span></td>
            <td width="74%" align="left"><span class="field">
              <input name="articletitle" type="text" value="<?php echo $articletitle; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Author</span></td>
            <td align="left"><span class="field">
              <input name="articleorganization" type="text" value="<?php echo $articleorganization; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Date</span></td>
            <td align="left"><span class="field">
              <input name="articledate" type="text" value="<?php echo $articledate; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Url:</span></td>
            <td align="left"><span class="field">
              <input name="articleurl" type="text" value="<?php echo $articleurl; ?>" size="50"/>
            </span></td>
          </tr>
          <tr>
            <td align="right"><span class="field">Article Tags:</span></td>
            <td align="left"><span class="field">
              <input name="articletags" type="text" value="<?php echo $articletags; ?>" size="50"/>
            </span></td>
          </tr>
          <tr align="center" valign="middle">
            <td colspan="2"><input type="submit" name="submit" value="Submit" /></td>
          </tr>
        </table>
          </div>
       </form>
    </div>
  </div>
  <div class="footer">
    <p>My Footer</p>
    <!-- end .footer --></div>
</body>
</html>

Upvotes: 0

Views: 204

Answers (2)

yudayyy
yudayyy

Reputation: 360

After looking on your CSS, you haven't define the background color for your content class

   .content {
    padding: 10px 0;
    width: 80%;
    float: left;
   }

I recommend you using ID rahter than Class, because your content div is unique.

EDIT

I think what you mean is why the div class container not showing it background-color = #FFF; ? Sorry for mistaken your question, you should add in .container css.

overflow: hidden;

Upvotes: 1

Dipak
Dipak

Reputation: 12190

You need to clear the floats at this point - Add <div style="clear:both;"></div> in your code, where I have placed.

    </form>
    <div style="clear:both;"></div>
    </div>      
  </div>
  <div class="footer">

Demo: http://jsfiddle.net/UAbe9/1/

Upvotes: 0

Related Questions