When I find the answer to this question I will feel like an idiot because I know I've solved it in the past, but it goes like this:
I've got a pretty simple little bit of code. It goes like this:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home Index Test</title>
<link rel="stylesheet" type="text/css" href="reset.css" media="all">
<link rel="stylesheet" type="text/css" href="styles.css" media="all">
<!-- <script type="text/javascript" src="view.js"></script> -->
</head>
<body>
<div id="wrapper">
wrapper
<div id="header">
<div id="logo">
<img src="kimchi_img/bibi_logo.jpg">
</div>
<div id="login_menu">
<p>About Contact | Sign In Register </p>
</div>
</div>
</div>
</body>
Easy, right? A wrapper class to bundle everything up, a header chunk that holds a logo and a menu. But when I peer at it in Firebug, it acts like the wrapper class isn't holding anything. I know that in Firefox a div element has to contain something in order to show up. So I tried a little test- I put the word "wrapper" inside the wrapper class like you see above. Well, now it shows up, but it acts like "wrapper" is only a single line long. I feel like I've missed an important step in the process. Here's the relevant CSS:
#wrapper {
clear:both;
margin:0 auto;
padding:0;
width:960px;
}
#header{
width:960px;
}
#logo{
float:left;
width: 380px;
}
#login_menu{
float:left;
text-align: right;
width:580px;
}
I've also got a reset.css purring in the back, it didn't clear it up. Looking back t past projects, I never seemed to have this problem. But it's been a year since my last big project and I feel like I'm overlooking something. Halp!