CodingForums.com - Resolved Navigation bar makes my border disappear?

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Resolved Navigation bar makes my border disappear? (http://www.codingforums.com/showthread.php?t=282307)

Navigation bar makes my border disappear?

I'm trying to make a page where there's one border around the content and navigation bar. So I put it all in a wrapper. However, the border disappears when I include the navigation bar in the wrapper and everything else below it moves around. I'm trying to make it where the text is on the right side of the image as well.

Here's my code:

Code:

<style>

#body {   

  margin : 0;

  font : 100.1% 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;

}



#wrapper {

  width : 770px;

  margin : auto;

  border : 1px solid #6c5160;

}



#navbar {

        margin: auto;

        padding: 0;

        height: 1.9em;

width : 770px;

background-color: #6c5160;

}

#navbar li {

        list-style: none;

          float: left;

}

#navbar li a {

        display: block;

        padding: 3px 8px;

        background-color: #6c5160;

        color: #fff;

        text-decoration: none;

font-family:Arial,Helvetica,sans-serif;}



#navbar li ul {

        display: none; 

        width: 10em;

        background-color: #6c5160;}





#navbar li:hover ul {

        display: block;

        position: absolute;

        margin: 0;

        padding: 0; }



#navbar li:hover li {

        float: none; }



#navbar li:hover li a {

        background-color: #6c5160;

        border-bottom: 1px solid #fff;

        color: #ffffff; }



#navbar li li a:hover {

        background-color: #c0b3a3; }



#left {

float : left;

display : inline;

width : 300px;

padding: 10px;

}



h1 {

text-align : center;}



#right {

padding: 30px;

float : right;

width : 390px;

text-align : left;

margin: auto;

font-family:Arial,Helvetica,sans-serif;

}



#footer {

  clear : both;

  padding : 10px;

  text-align : center;

  font-size : 0.9em;

width : 740px;

height : auto;

font-family : serif;

}



</style>



<body>



<h1>Logo</h1>

<div id="wrap">

<ul id="navbar">

        

<li><a href="#">Home</a><ul>

                <li><a href="#">one</a></li>

                <li><a href="#">two</a></li>

                <li><a href="#">threeee</a></li></ul>

        </li>

<ul id="navbar">

        <li><a href="#">About</a></li>

        

<ul id="navbar">

        <li><a href="#">FAQ</a>

        </li>

<ul id="navbar">

        <li><a href="#">Training</a>

        </li>

<ul id="navbar">

        <li><a href="#">Shop</a><ul>

                <li><a href="#">Log in</a></li>

                </ul>

        </li>

<ul id="navbar">

        <li><a href="#">Contact</a><ul>

                <li><a href="#">one</a></li>

                <li><a href="#">two</a></li>

                <li><a href="#">Numero Tres</a></li></ul>

        </li></br>

<div id="left"><img src="http://i43.photobucket.com/albums/e365/A---PerfectDisaster/Eyelash.jpg"></div>

<div id="right"><p>Welcome to Lash Essence</p>

      <p>Donec vel massa. Ut nibh. Donec placerat ultrices dui. Morbi eu dui eget mauris cursus pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ante neque, tempor eu, semper sit amet, hendrerit vitae, quam. Nullam ante. Pellentesque arcu sapien, suscipit in, elementum vitae, vulputate quis, metus. Quisque sollicitudin leo a diam. Quisque in risus sit amet mi faucibus feugiat. Ut ullamcorper pede a libero. Donec nisl.</p>

   </div>

<div id="footer">| About | Privacy Statement | Contact | Link Us |</div></div>

</body>

Hello kassarole,
But you didn't put it all in #wrapper, you put it all in #wrap.
There are quite a few other errors as well. See the links about validation in my signature line for help finding little mistakes like these.

Make your markup look like this for starters -

Code:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style type="text/css">

#body {   

  margin : 0;

  font : 100.1% 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;

}



#wrap {

  width : 770px;

  margin : auto;

  border : 1px solid #6c5160;

}



#navbar {

        margin: auto;

        padding: 0;

        height: 1.9em;

width : 770px;

background-color: #6c5160;

}

#navbar li {

        list-style: none;

          float: left;

}

#navbar li a {

        display: block;

        padding: 3px 8px;

        background-color: #6c5160;

        color: #fff;

        text-decoration: none;

font-family:Arial,Helvetica,sans-serif;}



#navbar li ul {

        display: none; 

        width: 10em;

        background-color: #6c5160;}





#navbar li:hover ul {

        display: block;

        position: absolute;

        margin: 0;

        padding: 0; }



#navbar li:hover li {

        float: none; }



#navbar li:hover li a {

        background-color: #6c5160;

        border-bottom: 1px solid #fff;

        color: #ffffff; }



#navbar li li a:hover {

        background-color: #c0b3a3; }



#left {

float : left;

display : inline;

width : 300px;

padding: 10px;

}



h1 {

text-align : center;}



#right {

padding: 30px;

float : right;

width : 390px;

text-align : left;

margin: auto;

font-family:Arial,Helvetica,sans-serif;

}



#footer {

  clear : both;

  padding : 10px;

  text-align : center;

  font-size : 0.9em;

width : 740px;

height : auto;

font-family : serif;

}

</style>

</head>

<body>

<h1>Logo</h1>

    <div id="wrap">

        <ul id="navbar">        

            <li><a href="#">Home</a>

                <ul>

                    <li><a href="#">one</a></li>

                    <li><a href="#">two</a></li>

                    <li><a href="#">threeee</a></li>

                </ul>

            </li>

            <li><a href="#">About</a></li>

            <li><a href="#">FAQ</a></li>

            <li><a href="#">Training</a></li>

            <li><a href="#">Shop</a>

                <ul>

                        <li><a href="#">Log in</a></li>

                </ul>

            </li>

            <li><a href="#">Contact</a>

                <ul>

                    <li><a href="#">one</a></li>

                    <li><a href="#">two</a></li>

                    <li><a href="#">Numero Tres</a></li>

                </ul>

            </li>

        </ul>

    <div id="left"><img src="http://i43.photobucket.com/albums/e365/A---PerfectDisaster/Eyelash.jpg"></div>

    <div id="right">

        <p>Welcome to Lash Essence</p>

        <p>

            Donec vel massa. Ut nibh. Donec placerat ultrices dui. Morbi eu dui eget mauris cursus pellentesque. 

            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ante 

            neque, tempor eu, semper sit amet, hendrerit vitae, quam. Nullam ante. Pellentesque arcu sapien, 

            suscipit in, elementum vitae, vulputate quis, metus. Quisque sollicitudin leo a diam. Quisque in 

            risus sit amet mi faucibus feugiat. Ut ullamcorper pede a libero. Donec nisl.

        </p>

   </div>

            <div id="footer">| About | Privacy Statement | Contact | Link Us |</div>

    <!--end wrap--></div>

</body>

</html>

Thank you so much! I've honestly never really validated before, but I see now how it's important.