RandyRiegel
Programmer
This is probably simple because I haven't didn't web development for many years. But now I got thrown into a web project at work. I used to always use tables for layouts but some of this is already written using <div>'s.
I am trying to get a top "header" on my page that does not scroll with the rest of the page. If I use "position:fixed;" in my CSS the next div is either behind the header and if i use margin-top on the content div it moves the header bar down. I have an example of what it is doing on my personal site.
Here is the code I have:
What am I doing wrong?
Thanks
I am trying to get a top "header" on my page that does not scroll with the rest of the page. If I use "position:fixed;" in my CSS the next div is either behind the header and if i use margin-top on the content div it moves the header bar down. I have an example of what it is doing on my personal site.
Here is the code I have:
HTML:
<html>
<head>
<title>Randy's Test Site</title>
<link href="css/layout.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="top_header_bar">
<div style="float:left;padding-left: 20px;">
Hello
</div>
<div style="float:right;padding-right: 20px;">
Goodbye
</div>
</div>
<div id="content" style="width:800px; height:1000px; background-color:#cccccc;margin-top:51px;">
Randy
</div>
</body>
</html>
CSS:
/* Layout.css */
body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
.top_header_bar {
width: 100%;
height: 50px;
border-bottom: 1px solid black;
background-color: #f3f4c0;
position: fixed;
}What am I doing wrong?
Thanks
