CODEWITHSUNDEEP
htmlcsscss-float
Ryan Sinclair
Ryan Sinclair

Reputation: 205

floating divs are overlapping

I have the following code, its simplified to demonstrate the issue. The menuholder div is not inside the form div, but it is showing up that way. It needs to be to the right of it, any reason why this is happening?

<!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>Website</title>

<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-color: #FFFFFF;
}

#header {
width: 900px;
height: 600px;
border: 2px dashed #906;
}

#website {
width: 150px;
height: 90px;
float: left;
border: 2px dashed #F00;
}

#form {
width: 300px;
height: 200px;
float: left;
border: 2px dashed #906;

}
#menuholder {
width: 220px;
height: 200px;
float: left;
border: 2px dashed #30F;    
}
</style>

</head>
<body>
<div id="header">
<div id="website">
    <h1><a href="#">Website</a></h1>
</div>

<div id="form">          
<form action="login.php" method="POST">
<table>
    <tr>
        <td>
        Username:
        </td>
        <td>
       <input type="text" name="username">
        </td>

    </tr>


    <tr>
        <td>
        Password:
        </td> 
        <td>
        <input type='password' name='password'>
        </td>

    </tr>

<table>
<p>
<input type='submit' name='submit' value='Login'>
<p>
<a href='register.php'> Register!</a>
</div>

<div id="menuholder">
    <ul id="menu">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">register</a></li>
        <li><a href="#">about application</a></li>
        <li><a href="#">demo</a></li>
        <li><a href="#">help</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</div>
</div>



</body>
</html>

On google inspect, it shows that the div menuholder is housed within the div of form. However, on my code, it is not. I was able to drag and drop in google inspect and it looks right. How do i fix my code to make it so i dont have to do this?

Upvotes: 0

Views: 241

Answers (3)

adriatiq
adriatiq

Reputation: 326

That opening comment could do with a close as well while we're at it..

<style type="text/css">
<!--

Upvotes: 1

kroehre
kroehre

Reputation: 1104

  • The closing tag for your table should be </table>
  • You're missing the closing </form> tag.
  • The closing tag for your p tag should be </p>
  • The inputs aren't closed properly (should end in /> not >

If you aren't already, I'd suggest tabbing in each time you open up an html node and tabbing out each time you close one. That will help you see where tags aren't closed.

Upvotes: 3

Chords
Chords

Reputation: 6860

A table? In a form?!

  • Close your <table> tag
  • Close your <form> tag
  • Close your <p> tag

Upvotes: 1

Related Questions