Please have a look at my HTML I have built a website using HTML and CSS. Actually I wanted to learn by implementing real world examples. I have built a site like Google. The search box does not work(I actually did not wanted to go further in the form action part and also did not wanted to use any search engine) and I have not copied anything from their site. Its just an effort to learn HTML and CSS. Please have a look and review it.

CODE:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
        &lt;title&gt;MyGoogle&lt;/title&gt;
        &lt;style type="text/css"&gt;
        #header
        {
            width:100%;
            height:20px;        
        }
        #header hr
        {
                border: none;
                border-bottom: 2px solid #06f;
        }
        .menu ul
        {
            text-decoration:none;
            margin:0;
            padding:0;      
        }
        .menu li
        {
            display:inline; 
        }
        #footer
        {
        }
        #logo
        {
            padding-top:150px;
            padding-left:50px;
            height:500;
            width: 100%;            
        }
        .menu
        {
            width:100%;
            background-color:#FFF;  
        }
        #searchbuttons
        {
            padding-left:80px;  
        }
        #searchbox
        {
            padding-left:0px;
            padding-top:20px;   
        }
        #container
        {   
            padding-left:450px; 
        }

        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;

  &lt;div id="header"&gt;
            &lt;div class="menu"&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="http://www.google.com.pk/webhp?hl=en&amp;tab=iw"&gt;Web&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="http://www.google.com.pk/imghp?hl=en&amp;tab=wi"&gt;Images&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="http://news.google.com.pk/nwshp?hl=en&amp;tab=in"&gt;News&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="http://translate.google.com.pk/?hl=en&amp;tab=nT"&gt;Translate&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="http://books.google.com.pk/bkshp?hl=en&amp;tab=Tp"&gt;Books&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="http://scholar.google.com.pk/schhp?hl=en&amp;tab=ps"&gt;Scholar&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="https://mail.google.com/mail/?hl=en&amp;shva=1"&gt;Gmail&lt;/a&gt;&lt;/li&gt;
                &lt;!--Was unable to add a drop down menu for more --&gt;
                &lt;/ul&gt;
            &lt;/div&gt;&lt;!-- Menu division ends--&gt;
             &lt;hr/&gt;  &lt;!--This does not display--&gt;
        &lt;/div&gt;&lt;!--Header Division ends--&gt;
         &lt;div id="container"&gt;
        &lt;div id="logo"&gt;&lt;img src="http://dvice.com/pics/google_dilemma.jpg" width="300" height="114" &gt;&lt;/div&gt;&lt;!--Logo division ends--&gt;
    &lt;!--was having a problem when adding --&gt;      
        &lt;form action="http://www.datafeedfile.com/examples/javascript_search.php" method="get"&gt;  &lt;div id="searchbox"&gt;
        &lt;input type="text" title="Search Text" accesskey="s" alt="Search Text" size="60px" maxlength="80" value="" /&gt;
        &lt;/div&gt;
        &lt;!--Search Box Devision ends--&gt;
    &lt;div id= "searchbuttons"&gt;
      &lt;input type="submit" value="Google Search"/&gt;
      &lt;input type="submit" value=" I'm Feeling Lucky"&gt;
    &lt;/div&gt; &lt;!--Search Button division ends--&gt;
&lt;/form&gt;
    &lt;/div&gt; &lt;!--container ends--&gt;

&lt;/body&gt;
&lt;/html&gt;
Just a few quick things I see to help improve your code:


I would start using the HTML5 Doctype, unless you have a specific reason not to. &lt;!doctype html&gt;
Instead of having an &lt;hr&gt; tag why not just put a border-bottom:2px solid #06f; on your #header div.  And then add like a padding-bottom:5px;
Instead of having

 &lt;div class="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Another Link&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
 &lt;/div&gt;


Why not just do this:

&lt;ul class="menu"&gt;
   &lt;li&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=""&gt;Another Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


And just change your CSS accordingly:

 .menu { text-decoration:none; margin:0; padding:0; }
 .menu li { display:inline; }