Divs within another div go to the bottom of page...

This is a discussion on "Divs within another div go to the bottom of page..." within the Web Page Design section. This forum, and the thread "Divs within another div go to the bottom of page... are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page Divs within another div go to the bottom of page...

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Feb 23rd, 2006, 12:50
Junior Member
Join Date: May 2005
Location: Manchester, UK
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Divs within another div go to the bottom of page...
I hope this makes sense!

I have a 3 column layout.

When i put divs inside my center div they start below anything thats in the left div.

Heres a screenshot of it...



As you can see the div with the text 'heading' inside it starts way down the bottom of the page.


I would like it to start in line with the browse by artist and shopping cart divs in this screenshot




Any idea why the content is starting down at the bottom? Is it to do with 'clear' in the css?

Any help appreciated.

Nitesh


Edit

Heres the code... (one of them days!!)

CSS

Code: Select all
*{margin:0;padding:0;}

#container
{
width: 97%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

.insidecontent
{
clear: both;
padding: .2em;
margin-top: 0cm;
margin-right: 0cm;
margin-bottom: 0cm;
margin-left: 0cm;
width: 99%;
background-color: #DDE;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 0px solid gray;
border-left: 1px solid gray;
}

.insidecontent2
{
padding: .2em;
margin-top: 0cm;
margin-right: 0cm;
margin-bottom: 0.3cm;
margin-left: 0cm;
width: 99%;
border: 1px solid gray;
}

.moreinfo
{
float: right;
margin-top: 0cm;
margin-right: 0.05cm;
margin-bottom: 0cm;
margin-left: 0cm;
width: 113px;
border: 1px solid gray;
}

#moreinfo2
{
float: left;
width: 160px;
border: 1px solid gray;
}

#navlist
{
padding: 3px 0;
margin-top: 0.5cm;
margin-right: 0cm;
margin-bottom: 0.1cm;
margin-left: 0cm;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
text-align: center;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover

{
color: #000;
background: #AAE;
border-color: #227;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}

#top
{
padding: .2em;
background-color: White;
border-bottom: 0px solid gray;
}
* html #top{height:1%;}


#top2
{
text-align: center;
padding: 0.5em;
background-color: white;
border-bottom: 1px solid gray;
}

#leftnav
{
float: left;
width: 160px;

padding: 1em;
border-right: 1px solid gray;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
border-left: 1px solid gray;
}

.sidebars
{
width: 160px;
border: 1px solid gray;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

h1
{
padding: 0;
margin: 0;  
font-size: 17px;
font-family: Verdana, sans-serif;
font-weight: bold;
}

h2
{
padding: 0;
margin: 0;  
font-size: 16px;
font-family: Verdana, sans-serif;
font-weight: Bold;
}

h3
{
padding: 0;
margin: 0;  
font-size: 12px;
font-family: Verdana, sans-serif;
font-weight: Bold;
}

p
{
padding: 0;
margin: 0;
font-size: 12px;
font-family: Verdana, sans-serif;
font-weight: normal;
}

img
{
border-style: none;
}




    head+body #top:after{
    content: "."; 
    display: block; 
    height:0; 
    clear: both; 
    visibility: hidden;
    }
HTML

Code: Select all
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head> 

<title>Welcome to Manchester Music Exchange Strict XHTML</title>

<link href="MME.css" rel="stylesheet" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>

    
    

</head>

<body>

<div id="container">

<div id="top">

<div id="moreinfo2"><p>logo for site</p></div>


<div class="moreinfo"><a href="#"><img src="http://www.webforumz.com/images/login.jpg" alt="Login"></img></a></div>

<div class="moreinfo"><a href="#"><img src="http://www.webforumz.com/images/information.jpg" alt="About Us"></img></a></div>

<div class="moreinfo"><a href="#"><img src="http://www.webforumz.com/images/help.jpg" alt="Help"></img></a></div>

<div class="moreinfo"><a href="#"><img src="http://www.webforumz.com/images/mail.jpg" alt="Contact Us"></img></a></div>



</div>


<div class="navlist">

<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="page2.htm">Browse Store</a></li>
<li><a href="page3.htm">Blog</a></li>
<li><a href="page4.htm">Forum</a></li>
<li><a href="page5.htm">Item five</a></li>
</ul>

</div>


<div id="top2">

<form action="songresults.asp" method="get" name="frmsongsearch">


<input type="text" name="searchboxinput" size="25" maxlength="25" />


<input type="submit" value="Search" />

</form>

</div>


<div id="leftnav">







<div class="sidebars">

<h3>
Browse by Artists - A-Z
</h3>


<table>

<tr>

<td>
<p>
<a href="songresults.asp?letter=a">A</a>
<a href="songresults.asp?letter=b">B</a>
<a href="songresults.asp?letter=c">C</a>
<a href="songresults.asp?letter=d">D</a>
<a href="songresults.asp?letter=e">E</a>
<a href="songresults.asp?letter=f">F</a>
<a href="songresults.asp?letter=g">G</a>
<a href="songresults.asp?letter=h">H</a>
<a href="songresults.asp?letter=i">I</a>
<a href="songresults.asp?letter=j">J</a>
<a href="songresults.asp?letter=k">K</a>
<a href="songresults.asp?letter=l">L</a>
<a href="songresults.asp?letter=m">M</a>
<a href="songresults.asp?letter=n">N</a>
<a href="songresults.asp?letter=o">O</a>
<a href="songresults.asp?letter=p">P</a>
<a href="songresults.asp?letter=q">Q</a>
<a href="songresults.asp?letter=r">R</a>
<a href="songresults.asp?letter=s">S</a>
<a href="songresults.asp?letter=t">T</a>
<a href="songresults.asp?letter=u">U</a>
<a href="songresults.asp?letter=v">V</a>
<a href="songresults.asp?letter=w">W</a>
<a href="songresults.asp?letter=x">X</a>
<a href="songresults.asp?letter=y">Y</a>
<a href="songresults.asp?letter=z">Z</a>
</p>
</td>


</tr>

</table>


</div>

<br />

<div class="sidebars">





<p>
<a href="songdetails.asp?ID=Asian">Asian</a>
</p>





<p>
<a href="songdetails.asp?ID=Blues">Blues</a>
</p>





<p>
<a href="songdetails.asp?ID=Christmas">Christmas</a>
</p>





<p>
<a href="songdetails.asp?ID=Classical">Classical</a>
</p>





<p>
<a href="songdetails.asp?ID=Country/Western">Country/Western</a>
</p>





<p>
<a href="songdetails.asp?ID=Drum N Bass">Drum N Bass</a>
</p>





<p>
<a href="songdetails.asp?ID=Electronic">Electronic</a>
</p>





<p>
<a href="songdetails.asp?ID=Gothic">Gothic</a>
</p>





<p>
<a href="songdetails.asp?ID=Hardcore">Hardcore</a>
</p>





<p>
<a href="songdetails.asp?ID=Hip Hop">Hip Hop</a>
</p>





<p>
<a href="songdetails.asp?ID=Indie">Indie</a>
</p>





<p>
<a href="songdetails.asp?ID=Jazz">Jazz</a>
</p>





<p>
<a href="songdetails.asp?ID=Latin">Latin</a>
</p>





<p>
<a href="songdetails.asp?ID=Metal">Metal</a>
</p>





<p>
<a href="songdetails.asp?ID=Miscellaneous">Miscellaneous</a>
</p>





<p>
<a href="songdetails.asp?ID=Pop">Pop</a>
</p>





<p>
<a href="songdetails.asp?ID=Punk">Punk</a>
</p>





<p>
<a href="songdetails.asp?ID=Rap">Rap</a>
</p>





<p>
<a href="songdetails.asp?ID=Reggae">Reggae</a>
</p>





<p>
<a href="songdetails.asp?ID=RnB">RnB</a>
</p>





<p>
<a href="songdetails.asp?ID=Rock">Rock</a>
</p>





<p>
<a href="songdetails.asp?ID=Trance/House/Dance">Trance/House/Dance</a>
</p>






</div>

<br />


<div class="sidebars">



<h3>
Browse by Format
</h3>



<form action="browse.asp" method="get" name="formatname">

<select name="formatnames">


<option value="12"">12"</option>

<option value="7"">7"</option>

<option value="CD">CD</option>

<option value="Cassette">Cassette</option>

<option value="LP">LP</option>

<option value="Mp3">Mp3</option>



<input type="submit" value="Search" />



</div>



<br />

<div class="sidebars">

<p>Offers</p>

</div>

</div>


<div id="rightnav">

<div class="sidebars">

<p>Shopping Cart</p>

</div>

<br />

<div class="sidebars">

<p>Offer ad</p>

</div>


</div>


<div id="content">


<div class="insidecontent">

<h1>Heading</h1>

</div>

<div class="insidecontent2">

<p>Content and intro to the site.</p>

<p>Plus deals iTunes style</p>

</div>

<div class="insidecontent">

<h2>Best Sellers</h2>

</div>

<div class="insidecontent2">

<p>Song 1 | Song 2 | Song 3</p>

</div>

<div class="insidecontent">

<h2>Classic Tunes</h2>

</div>

<div class="insidecontent2">

<p>Song 1 | Song 2 | Song 3</p>

</div>

</div>


<div id="footer">

<p>Footer
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88"></img></a>
</p>

</div>

</div>

</body>

</html>
Last edited by Nitesh9999; Feb 23rd, 2006 at 13:17.
Reply With Quote

  #2 (permalink)  
Old Feb 23rd, 2006, 14:42
herkalees's Avatar
Highly Reputable Member
Join Date: Jul 2005
Location: Massachusetts, USA
Age: 87
Posts: 576
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to herkalees Send a message via MSN to herkalees Send a message via Yahoo to herkalees
Re: Divs within another div go to the bottom of page...
I threw your code into DW and it light up like a lightbulb... you have many unclosed <div>s in your code. Clean it up, validate it, then see if the design is still broken.
Reply With Quote
  #3 (permalink)  
Old Feb 23rd, 2006, 20:36
Up'n'Coming Member
Join Date: Feb 2006
Location: London
Age: 25
Posts: 97
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Divs within another div go to the bottom of page...
You need to add float:left; to #leftnav and #content.

#leftnav
{
float: left;
width: 160px;

padding: 1em;
border-right: 1px solid gray;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
float: left;
}

But you do have a lot of unclosed tags!!!! It's messy...
Reply With Quote
  #4 (permalink)  
Old Feb 24th, 2006, 11:49
Junior Member
Join Date: May 2005
Location: Manchester, UK
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Divs within another div go to the bottom of page...
Hi, I fixed it,

I removed the "clear both" from the content div.

Here is the latest code (which I tried cleaning using w3 validator, got 8 errors now, but they don't seem to make sense at all)...

CSS

Code: Select all
*{margin:0;padding:0;}

#container
{
width: 97%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 100%;
}

.insidecontent
{
padding: .2em;
width: 97%;
background-color: #DDE;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 0px solid gray;
border-left: 1px solid gray;
margin-top: 0.3cm;
margin-right: auto;
margin-bottom: 0cm;
margin-left: auto;
text-align: left;
}

.insidecontent2
{
padding: .2em;
width: 97%;
border: 1px solid gray;
margin-top: 0cm;
margin-right: auto;
margin-bottom: 0.3cm;
margin-left: auto;
text-align: left;
}

.moreinfo
{
float: right;
margin-top: 0cm;
margin-right: 0.05cm;
margin-bottom: 0cm;
margin-left: 0cm;
width: 113px;
border: 1px solid gray;
}

#moreinfo2
{
float: left;
width: 194px;
border: 1px solid gray;
}

#navlist
{
padding: 2px 0;
margin-top: 0.5cm;
margin-right: 0cm;
margin-bottom: 0.1cm;
margin-left: 0cm;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
text-align: center;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 2px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}

#top
{
padding: .2em;
background-color: White;
border-bottom: 0px solid gray;
}
* html #top{height:1%;}


#top2
{
text-align: center;
padding: 0.5em;
background-color: white;
border-bottom: 1px solid gray;
}

#leftnav
{
float: left;
width: 160px;
padding: 0.2em;
border-right: 1px solid gray;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 0.2em;
border-left: 1px solid gray;
}

.sidebarshead
{
width: 158px;
background-color: #DDE;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 0px solid gray;
border-left: 1px solid gray;
}

.sidebars
{
width: 158px;
border: 1px solid gray;
}

#content
{
margin-left: 170px;
border-left: 1px solid gray;
margin-right: 170px;
border-right: 1px solid gray;
padding: 0.2em;
text-align: center;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

h1
{
padding: 0;
margin: 0;  
font-size: 17px;
font-family: Verdana, sans-serif;
font-weight: bold;
}

h2
{
padding: 0;
margin: 0;  
font-size: 16px;
font-family: Verdana, sans-serif;
font-weight: Bold;
}

h3
{
padding: 0;
margin: 0;  
font-size: 12px;
font-family: Verdana, sans-serif;
font-weight: Bold;
}

p
{
padding: 0;
margin: 0;
font-size: 12px;
font-family: Verdana, sans-serif;
font-weight: normal;
}

img
{
border-style: none;
}




    head+body #top:after{
    content: "."; 
    display: block; 
    height:0; 
    clear: both; 
    visibility: hidden;
    }
HTML


Code: Select all
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

 <head> 

   <title>Manchester Music Exchange Strict XHTML</title>

   <link href="MME.css" rel="stylesheet" type="text/css" />

   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>

 </head>
 <body>

   <div id="container">

     <div id="top">

       <div id="moreinfo2"><a href="index.asp"><img src="images/play.gif" alt="Home"></img></a></div>


<div class="moreinfo"><a href="#"><img src="images/login.jpg" alt="Login"></img></a></div>

<div class="moreinfo"><a href="#"><img src="images/information.jpg" alt="About Us"></img></a></div>
<div class="moreinfo"><a href="#"><img src="images/help.jpg" alt="Help"></img></a></div>

<div class="moreinfo"><a href="#"><img src="images/mail.jpg" alt="Contact Us"></img></a></div>



     </div>


     <div class="navlist">

       <ul id="navlist">
         <li id="active"><a href="#" id="current">Home</a></li>
         <li><a href="page2.htm">Browse Store</a></li>
         <li><a href="page3.htm">Blog</a></li>
         <li><a href="page4.htm">Forum</a></li>
         <li><a href="page5.htm">Item five</a></li>
       </ul>

     </div>

     <div id="top2">

       <form action="songresults.asp" method="get" name="frmsongsearch">


<input type="text" name="searchboxinput" size="25" maxlength="25" />


<input type="submit" value="Search" />

</form>

     </div>

     <div id="leftnav">

       





 <div class="sidebarshead">

   <h3>Browse by Artists: A-Z</h3>

 </div>

 <div class="sidebars">
   <table>

     <tr>
  
       <td>
         
         <p>
          
           <a href="artistresults.asp?letter=A">A</a>
           <a href="artistresults.asp?letter=B">B</a>
           <a href="artistresults.asp?letter=C">C</a>
           <a href="artistresults.asp?letter=D">D</a>
           <a href="artistresults.asp?letter=E">E</a>
           <a href="artistresults.asp?letter=F">F</a>
           <a href="artistresults.asp?letter=G">G</a>
           <a href="artistresults.asp?letter=H">H</a>
           <a href="artistresults.asp?letter=I">I</a>
           <a href="artistresults.asp?letter=J">J</a>
           <a href="artistresults.asp?letter=K">K</a>
           <a href="artistresults.asp?letter=L">L</a>
           <a href="artistresults.asp?letter=M">M</a>
           <a href="artistresults.asp?letter=N">N</a>
           <a href="artistresults.asp?letter=O">O</a>
           <a href="artistresults.asp?letter=P">P</a>
           <a href="artistresults.asp?letter=Q">Q</a>
           <a href="artistresults.asp?letter=R">R</a>
           <a href="artistresults.asp?letter=S">S</a>
           <a href="artistresults.asp?letter=T">T</a>
           <a href="artistresults.asp?letter=U">U</a>
           <a href="artistresults.asp?letter=V">V</a>
           <a href="artistresults.asp?letter=W">W</a>
           <a href="artistresults.asp?letter=X">X</a>
           <a href="artistresults.asp?letter=Y">Y</a>
           <a href="artistresults.asp?letter=Z">Z</a>

         </p>
       </td>

     </tr>

   </table>


 </div>

 <br />

 <div class="sidebarshead">

   <h3>Browse by Genre</h3>

 </div>


 <div class="sidebars">



   <p><a href="genreresults.asp?genre=Asian">Asian</a></p>




   <p><a href="genreresults.asp?genre=Blues">Blues</a></p>




   <p><a href="genreresults.asp?genre=Christmas">Christmas</a></p>



   <p><a href="genreresults.asp?genre=Classical">Classical</a></p>




   <p><a href="genreresults.asp?genre=Country/Western">Country/Western</a></p>



   <p><a href="genreresults.asp?genre=Drum N Bass">Drum N Bass</a></p>




   <p><a href="genreresults.asp?genre=Electronic">Electronic</a></p>




   <p><a href="genreresults.asp?genre=Gothic">Gothic</a></p>



   <p><a href="genreresults.asp?genre=Hardcore">Hardcore</a></p>




   <p><a href="genreresults.asp?genre=Hip Hop">Hip Hop</a></p>



   <p><a href="genreresults.asp?genre=Indie">Indie</a></p>




   <p><a href="genreresults.asp?genre=Jazz">Jazz</a></p>




   <p><a href="genreresults.asp?genre=Latin">Latin</a></p>



   <p><a href="genreresults.asp?genre=Metal">Metal</a></p>




   <p><a href="genreresults.asp?genre=Miscellaneous">Miscellaneous</a></p>



   <p><a href="genreresults.asp?genre=Pop">Pop</a></p>




   <p><a href="genreresults.asp?genre=Punk">Punk</a></p>




   <p><a href="genreresults.asp?genre=Rap">Rap</a></p>



   <p><a href="genreresults.asp?genre=Reggae">Reggae</a></p>




   <p><a href="genreresults.asp?genre=RnB">RnB</a></p>



   <p><a href="genreresults.asp?genre=Rock">Rock</a></p>




   <p><a href="genreresults.asp?genre=Trance/House/Dance">Trance/House/Dance</a></p>





 </div>
 <br />


 <div class="sidebarshead">

   <h3>Browse by Format</h3>

 </div>


 <div class="sidebars">
   <form action="formatresults.asp" method="get" name="formatname">

   <select name="formatnames">



     <option value="12"">12"</option>



     <option value="7"">7"</option>


     <option value="CD">CD</option>



     <option value="Cassette">Cassette</option>



     <option value="LP">LP</option>


     <option value="Mp3">Mp3</option>




   <input type="submit" value="Search" />

   </form>

 </div>
 
 <br />


 <div class="sidebarshead">

   <h3>Offers</h3>

 </div>


 <div class="sidebars">
   <p>Great deals!</p>

 </div>

     </div>


     <div id="rightnav">

       <div class="sidebarshead">
<h3>Shopping Cart Contents</h3>

</div>


<div class="sidebars">

<p>Shopping Cart details</p>

</div>

<br />


<div class="sidebarshead">

<h3>Shopping Cart</h3>

</div>


<div class="sidebars">

<p>Offer ad</p>

</div>


     </div>

     <div id="content">


       <div class="insidecontent">

         <h1>Welcome to Manchester Music Exchange</h1>

       </div>

       
       <div class="insidecontent2">
         <p>Hello. Welcome to...</p>

         <p>Use the menus on the left to browse by, Artist, Genre, Format or use the search box above to search by Artist and Song name.</p>

       </div>

       
       <div class="insidecontent">
        
         <h2>Best Sellers</h2>
       </div>


       <div class="insidecontent2">

         <p>Song 1 | Song 2 | Song 3</p>

       </div>

 
       <div class="insidecontent">
         <h2>Classic Tunes</h2>

       </div>


       <div class="insidecontent2">

         <p>Song 1 | Song 2 | Song 3</p>

       </div>
     </div>


     <div id="footer">

       <p>Footer</p>

       <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88"></img></a>
       
       
     </div>

   </div>

  </body>

</html>
I will try cleaning it up further, maybe even start from scratch...
Reply With Quote
  #5 (permalink)  
Old Feb 24th, 2006, 12:13
herkalees's Avatar
Highly Reputable Member
Join Date: Jul 2005
Location: Massachusetts, USA
Age: 87
Posts: 576
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to herkalees Send a message via MSN to herkalees Send a message via Yahoo to herkalees
Re: Divs within another div go to the bottom of page...
Can you post the list of errors? I'd do it, but it's 8am and I'm still sleeping.
Reply With Quote
  #6 (permalink)  
Old Feb 27th, 2006, 13:44
Junior Member
Join Date: May 2005
Location: Manchester, UK
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Divs within another div go to the bottom of page...
Hi, the HTML errors (8 now) from the code below



1
Error Line 54, column 56: there is no attribute "name" . <form action="songresults.asp" method="get" name="frmsongsearch">
2
Error Line 57, column 67: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag . ..." name="searchboxinput" size="25" maxlength="25" />

3
Error
Line 60,
column 37:
document
type does not allow element "input" here; missing one of "p", "h1",
"h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset",
"ins", "del" start-tag
.
<input type="submit" value="Search" />

4
Error
Line 280,
column 29:
document
type does not allow element "select" here; missing one of "p", "h1",
"h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset",
"ins", "del" start-tag
.
<select name="formatnames">

5
Error
Line 284,
column 23:
an attribute specification must start with a name or name token
.
<option value="12"">12"</option>

6
Error
Line 288,
column 22:
an attribute specification must start with a name or name token
.
<option value="7"">7"</option>

7
Error
Line 309,
column 40:
document type does not allow element "input" here
.
<input type="submit" value="Search" />

8
Error
Line 311,
column 9:
end tag for "select" omitted, but OMITTAG NO was specified
.
</form>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
Reply With Quote
  #7 (permalink)  
Old Feb 27th, 2006, 13:47
Junior Member
Join Date: May 2005
Location: Manchester, UK
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Divs within another div go to the bottom of page...
This is the HTML that gives the errors


Code: Select all
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

 <head> 

   <title>Manchester Music Exchange Strict XHTML</title>

   <link href="MME.css" rel="stylesheet" type="text/css" />

   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>

 </head>
 <body>

   <div id="container">

     <div id="top">

       <div id="moreinfo2"><a href="index.asp"><img src="http://www.webforumz.com/images/play.gif" alt="Home"></img></a></div>


<div class="moreinfo"><a href="#"><img src="http://www.webforumz.com/images/login.jpg" alt="Login"></img></a></div>

<div class="moreinfo"><a href="#"><img src="http://www.webforumz.com/images/information.jpg" alt="About Us"></img></a></div>
<div class="moreinfo"><a href="#"><img src="http://www.webforumz.com/images/help.jpg" alt="Help"></img></a></div>

<div class="moreinfo"><a href="#"><img src="http://www.webforumz.com/images/mail.jpg" alt="Contact Us"></img></a></div>



     </div>


     <div class="navlist">

       <ul id="navlist">
         <li id="active"><a href="#" id="current">Home</a></li>
         <li><a href="page2.htm">Browse Store</a></li>
         <li><a href="page3.htm">Blog</a></li>
         <li><a href="page4.htm">Forum</a></li>
         <li><a href="page5.htm">Item five</a></li>
       </ul>

     </div>

     <div id="top2">

       <form action="songresults.asp" method="get" name="frmsongsearch">


<input type="text" name="searchboxinput" size="25" maxlength="25" />


<input type="submit" value="Search" />

</form>

     </div>

     <div id="leftnav">

       





 <div class="sidebarshead">

   <h3>Browse by Artists: A-Z</h3>

 </div>

 <div class="sidebars">
   <table>

     <tr>
  
       <td>
         
         <p>
          
           <a href="artistresults.asp?letter=A">A</a>
           <a href="artistresults.asp?letter=B">B</a>
           <a href="artistresults.asp?letter=C">C</a>
           <a href="artistresults.asp?letter=D">D</a>
           <a href="artistresults.asp?letter=E">E</a>
           <a href="artistresults.asp?letter=F">F</a>
           <a href="artistresults.asp?letter=G">G</a>
           <a href="artistresults.asp?letter=H">H</a>
           <a href="artistresults.asp?letter=I">I</a>
           <a href="artistresults.asp?letter=J">J</a>
           <a href="artistresults.asp?letter=K">K</a>
           <a href="artistresults.asp?letter=L">L</a>
           <a href="artistresults.asp?letter=M">M</a>
           <a href="artistresults.asp?letter=N">N</a>
           <a href="artistresults.asp?letter=O">O</a>
           <a href="artistresults.asp?letter=P">P</a>
           <a href="artistresults.asp?letter=Q">Q</a>
           <a href="artistresults.asp?letter=R">R</a>
           <a href="artistresults.asp?letter=S">S</a>
           <a href="artistresults.asp?letter=T">T</a>
           <a href="artistresults.asp?letter=U">U</a>
           <a href="artistresults.asp?letter=V">V</a>
           <a href="artistresults.asp?letter=W">W</a>
           <a href="artistresults.asp?letter=X">X</a>
           <a href="artistresults.asp?letter=Y">Y</a>
           <a href="artistresults.asp?letter=Z">Z</a>
        <a href="artistresults.asp?letter=1">1</a>
           <a href="artistresults.asp?letter=2">2</a>
           <a href="artistresults.asp?letter=3">3</a>
           <a href="artistresults.asp?letter=4">4</a>
           <a href="artistresults.asp?letter=5">5</a>
           <a href="artistresults.asp?letter=6">6</a>
           <a href="artistresults.asp?letter=7">7</a>
           <a href="artistresults.asp?letter=8">8</a>
           <a href="artistresults.asp?letter=9">9</a>
           <a href="artistresults.asp?letter=0">0</a>
         </p>

       </td>

     </tr>
   </table>


 </div>

 <br />


 <div class="sidebarshead">

   <h3>Browse by Genre</h3>
 </div>


 <div class="sidebars">




   <p><a href="genreresults.asp?genre=Asian">Asian</a></p>



   <p><a href="genreresults.asp?genre=Blues">Blues</a></p>




   <p><a href="genreresults.asp?genre=Christmas">Christmas</a></p>




   <p><a href="genreresults.asp?genre=Classical">Classical</a></p>



   <p><a href="genreresults.asp?genre=Country/Western">Country/Western</a></p>




   <p><a href="genreresults.asp?genre=Drum N Bass">Drum N Bass</a></p>



   <p><a href="genreresults.asp?genre=Electronic">Electronic</a></p>




   <p><a href="genreresults.asp?genre=Gothic">Gothic</a></p>




   <p><a href="genreresults.asp?genre=Hardcore">Hardcore</a></p>



   <p><a href="genreresults.asp?genre=Hip Hop">Hip Hop</a></p>




   <p><a href="genreresults.asp?genre=Indie">Indie</a></p>



   <p><a href="genreresults.asp?genre=Jazz">Jazz</a></p>




   <p><a href="genreresults.asp?genre=Latin">Latin</a></p>




   <p><a href="genreresults.asp?genre=Metal">Metal</a></p>



   <p><a href="genreresults.asp?genre=Miscellaneous">Miscellaneous</a></p>




   <p><a href="genreresults.asp?genre=Pop">Pop</a></p>



   <p><a href="genreresults.asp?genre=Punk">Punk</a></p>




   <p><a href="genreresults.asp?genre=Rap">Rap</a></p>




   <p><a href="genreresults.asp?genre=Reggae">Reggae</a></p>



   <p><a href="genreresults.asp?genre=RnB">RnB</a></p>




   <p><a href="genreresults.asp?genre=Rock">Rock</a></p>



   <p><a href="genreresults.asp?genre=Trance/House/Dance">Trance/House/Dance</a></p>





 </div>

 <br />


 <div class="sidebarshead">
   <h3>Browse by Format</h3>

 </div>


 <div class="sidebars">

   <form action="formatresults.asp" method="get" name="formatname">

   <select name="formatnames">


     <option value="12"">12"</option>



     <option value="7"">7"</option>



     <option value="CD">CD</option>


     <option value="Cassette">Cassette</option>



     <option value="LP">LP</option>



     <option value="Mp3">Mp3</option>



   <input type="submit" value="Search" />

   </form>

 </div>
 
 <br />


 <div class="sidebarshead">
   <h3>Offers</h3>

 </div>


 <div class="sidebars">

   <p>Great deals!</p>

 </div>
     </div>


     <div id="rightnav">

        <div class="sidebarshead">

   <h3>Shopping Cart Contents</h3>

 </div>

 <div class="sidebars">

   <p>Shopping Cart details</p>

 </div>

 <br />


 <div class="sidebarshead">
   <h3>Shopping Cart</h3>

 </div>


 <div class="sidebars">

   <p>Offer ad</p>

 </div>

     </div>


     <div id="content">


       <div class="insidecontent">

         <h1>Welcome to Manchester Music Exchange</h1>

       </div>

       
       <div class="insidecontent2">

         <p>Hello. Welcome to...</p>

         <p>Use the menus on the left to browse by, Artist, Genre, Format or use the search box above to search by Artist and Song name.</p>

       </div>

       
       <div class="insidecontent">
        
         <h2>Best Sellers</h2>

       </div>


       <div class="insidecontent2">

         <p>Song 1 | Song 2 | Song 3</p>

       </div>

 
       <div class="insidecontent">

         <h2>Classic Tunes</h2>

       </div>


       <div class="insidecontent2">

         <p>Song 1 | Song 2 | Song 3</p>

       </div>

     </div>


     <div id="footer">

       <p>Footer</p>
       <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88"></img></a>
       
       
     </div>

   </div>

  </body>

</html>
For error 1 i tried changing "name" to "id" but that broke the form?

I have no idea why there is a error for 2, 3 and 4

Error number 5 and 6 are because of the quotation marks (") used to note the inch unit. Dont know if i can do much to fix that?

Not sure about 7 and 8 either? 7 is the submit button for the form.
Last edited by Nitesh9999; Feb 27th, 2006 at 13:52.
Reply With Quote
  #8 (permalink)  
Old Feb 27th, 2006, 14:45
drd drd is offline
SuperMember

SuperMember
Join Date: Dec 2005
Location: Hampshire, England, UK
Age: 28
Posts: 62
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Divs within another div go to the bottom of page...
you need to use &quot; for quote marks in the xhtml which arent part of the tag - see the entities list for other characters: http://www.w3schools.com/tags/ref_entities.asp
Reply With Quote
  #9 (permalink)  
Old Feb 27th, 2006, 14:59
Junior Member
Join Date: May 2005
Location: Manchester, UK
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Divs within another div go to the bottom of page...
Quote:
Originally Posted by drd
you need to use &quot; for quote marks in the xhtml which arent part of the tag - see the entities list for other characters: http://www.w3schools.com/tags/ref_entities.asp
The 12" and 7" values are being drawn from a database, if i store them as 12&quot; and 7&quot; in the db then they will display as 12" and 7" when requested in a browser?
Reply With Quote
  #10 (permalink)  
Old Feb 28th, 2006, 00:55
Up'n'Coming Member
Join Date: Feb 2006
Location: London
Age: 25
Posts: 97
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Divs within another div go to the bottom of page...
Quote:
Originally Posted by Nitesh9999
The 12" and 7" values are being drawn from a database, if i store them as 12&quot; and 7&quot; in the db then they will display as 12" and 7" when requested in a browser?
12&quot; = 12" when pulled from a databse because the browser treats it as HTML.
Reply With Quote
  #11 (permalink)  
Old Mar 1st, 2006, 14:08
Junior Member
Join Date: May 2005
Location: Manchester, UK
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Divs within another div go to the bottom of page...
Thanks.

Any ideas on the other errors?
Reply With Quote
Reply

Tags
divs, within, div, bottom, page

« Table Problem? | Lost in a jungle of HTML! »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Divs "lagging" as page scrolls r0ck80y Web Page Design 3 Apr 29th, 2008 14:59
Green bar of colour at bottom of page gets bigger the more page is extended pixelgirl Web Page Design 1 Apr 1st, 2008 01:27
Repeating an image along the bottom of the page without setting it as background. imagius Web Page Design 9 Apr 27th, 2007 08:35
Top and bottom margin for container/wrapper divs jimz Web Page Design 1 Feb 27th, 2006 12:40
place following divs in one page centred div antonyx Web Page Design 12 Dec 30th, 2005 21:00


All times are GMT. The time now is 02:39.

Contact Us - Web Design & Development Forums - Archive - Top

Sleep Study Scoring :: Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Midwife Forums :: Football Betting :: Web Development India :: Ecommerce Software :: Football Stats :: Dry Cleaning Collection :: Free Bets :: xtreme wales - extreme clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Sharepoint Consultants :: Search Engine Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved