Problem w/ my container

**xcaliberse** · 12-10-2008 10:57 AM

Hey x10 members! I have a problem with my container that isnt showing. May you please carefully look through my code at kevinliang.x10hosting.com/test.html Thanks. I tried fixing it with the #clear{clear: both;} but it still didnt work. May you please tell me how to fix it? Thanks.

**quantum1** · 12-10-2008 11:11 AM

Your <div id="container"> does not have a close tag.

**vol7ron** · 12-10-2008 11:48 AM

I don't know if he fixed it, but it's showing as having a close tag at the very bottom before body.

Something that you should do is fix your style sheet.

Code:

.left, .right {
   display: inline;
}

I haven't looked at what's wrong with displaying them side by side, but it's easy to fix the News and Updates, and Featured Image:

Code:

<div class="left">
   <h1> News and Updates</h1>
   <div style="clear:left;">
      11/25/08
      <br/>Release of this site to the public.
   </div>
</div>

Additionally, your featured video div is taking up the whole width of the container div. You need to define the Feature Video like so:

Code:

<div style="width: 500px;" class="right">
   <h2>Featured Video</h2>
   <div style="">
      <p id="preview"></p>
      <embed width="448" height="361" type="application/x-shockwave-flash" src="player.swf" style="" id="player" name="player" quality="high" allowfullscreen="true" allowscriptaccess="always" flashvars="&amp;file=http://vid253.photobucket.com/albums/hh74/xcaliberse/Matt.flv&amp;image=/Matt.jpg"/>
      <script type="text/javascript" src="swfobject.js">
      <script type="text/javascript">
         var s1 = new SWFObject('player.swf','player','448','361','9');
         s1.addParam('allowfullscreen','true');
         s1.addParam('allowscriptaccess','always');
         s1.addParam('flashvars','&file=http://vid253.photobucket.com/albums/hh74/xcaliberse/Matt.flv&image=/Matt.jpg');
         s1.write('preview');
      </script>
   </div>
</div>

Code:

<div class="left"><h1> Featured Image </h1>
   <div style="clear: left; text-align: center;">
      <img border="0" src="http://img166.imageshack.us/img166/7861/mydesktopcb6.th.jpg" style=""/>
   </div>
</div>

**xcaliberse** · 12-10-2008 02:12 PM

Thanks guys but my <div id="container"> does have a </div>. It's at the end which is the point of the container ID. If you click "home" the white bg is the container which contains all my contents. I just dont know why its not showing. the clear ID shold've fixed it. may someone help me?

**vol7ron** · 12-10-2008 04:57 PM

You should re-read my post on how to position your site. It's not looking the same in FF as it is in IE.

As for your container div, you're missing the </div> for the "What you will find" section.

Also, you should put the <div id="clear"/> before the <hr />

----------------------------------------------------------------
I felt sorry for you, so I just recoded your page. Just copy and paste this. Notice, I did not redesign, I just cleaned up some key errors. I would say if I were to redesign it, I'd have an official right and left container DIVs and I'd stick those separate ones in their own containers.. but that's just me.

HTML Code:

<!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" />
<link href="CSS/template.css" rel="stylesheet" type="text/css" />
<link href="CSS/float.css" rel="stylesheet" type="text/css" />
<title>About</title>
<style type="text/css">

   #clear {
      clear: both;
   }
   h1 {
	background: url('/img/updates.jpg');
	height: 25px;
	width: 250px;
	float: left;
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 25px;
	font-weight: bold;
	text-align: center;
	}

   h2 	{
	background: url('/img/featured.jpg');
	height: 25px;
	width: 500px;
	float: right;
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 25px;
	font-weight: bold;
	text-align: center;
	}

   .right {
      float: right;
      clear: right;
   }

   .left {
      float: left;
      clear: left;
   }

   .right, left {
      display: inline;
   }

</style>
</head>

<body>
<div id="container">
   <div id="header"></div>

   <div id="nav">
      <table width="850">
         <tbody>
            <tr>
               <th scope="col" width="165"><a href="/template.html"> Home </a></th>
               <th scope="col" width="165"><a href="/about.html"> About </a> </th>
               <th scope="col" width="165"><a href="/blog.html">Blog </a></th>
               <th scope="col" width="165"><a href="/programs.html">Programs</a></th>
               <th scope="col" width="165"><a href="/banners.html">Gallery </a></th>
            </tr>
         </tbody>
      </table>
   </div>

   <div class="left">
      <h1> News and Updates</h1>
      <div style="clear:left;">
         11/25/08
         <br/>Release of this site to the public.
      </div>
   </div> 
  
    
   <div style="width: 500px;" class="right">
      <h2>Featured Video</h2>
      <div style="clear:right; text-align:center;">
         <p id="preview"></p>
         <embed width="448" 
                height="361" 
                type="application/x-shockwave-flash" 
                src="player.swf"
                id="player"
                name="player" 
                quality="high" 
                allowfullscreen="true"
                allowscriptaccess="always"
                flashvars="&amp;file=http://vid253.photobucket.com/albums/hh74/xcaliberse/Matt.flv&amp;image=/Matt.jpg"
         />
         <script type="text/javascript" src="swfobject.js">
         <script type="text/javascript">
            var s1 = new SWFObject('player.swf','player','448','361','9');
            s1.addParam('allowfullscreen','true');
            s1.addParam('allowscriptaccess','always');
            s1.addParam('flashvars','&file=http://vid253.photobucket.com/albums/hh74/xcaliberse/Matt.flv&image=/Matt.jpg');
            s1.write('preview');
         </script>
      </div>
   </div>

   <div class="left">
      <h1> Featured Image </h1>
      <div style="clear: left; text-align: center;">
         <img border="0" src="http://img166.imageshack.us/img166/7861/mydesktopcb6.th.jpg" style=""/>
      </div>
   </div>

   <div class="right" style="width:500px;">
      <h2>What you will find</h2>
      <div style="clear: right; text-align:left;">
         Things you will find in this site include:
         <ul>
           <li>Interested in me?  Wanting to hire me?  Wanting to know about me? My Resume and Information is in the <a href="/about.html">About</a> page. </li>
           <li> Events occurring or news for whomever visits this website is in the <a href="/blog.html">Blog</a> page. </li>
           <li> Programs that I coded, or just simply some cool programs out there is in the <a href="/programs.html">Programs</a> page.</li>
           <li> Videos, pictures, some extra work of mine, guestlog(coming soon), is in the <a href="/banners.html">Gallery</a> page.</li>
         </ul>
      </div>
   </div>


   <div id="clear"></div>

   <hr />
   <div id="footer">
      <div align="center"> Copyright 2008© All Rights Reserved.• Kevin Liang • KevinLiang91@gmail.com</div>
   </div>

</div> <!-- close container div -->

</body>
</html>