Topic: Problem with header padding

I'm using a fairly simple CSS with my ruby on rails application.  This includes a header which i've incorporated into my layouts with the title of the controller.  The problem I am having is that the header is supposed to always span the entire length of the browser.  However, I'm retrieving a table of data in the content area below the header.  If there are many fields in the table,  displaying the data causes the table to expand such that a horizontal scroll bar appears and the user must scroll to the right to see the rest of the table.  That is okay, but whenever that happens, it cuts the header off at the original point and there is a big ugly white space to the right of it when the browser is expanded.  I want this header to span all the way across the browser regardless of how much data is displayed in the content and i can't figure out how to do this.

If anyone can help or has suggestions, i would be extremely grateful.

Here is my CSS layout:

body {
    margin:0px;
    padding:0px;
    font-family:verdana, arial, helvetica, sans-serif;
    color:#333;
    background-color:white;
    }
h1 {
    margin:0px 0px 15px 0px;
    padding:0px;
    font-size:28px;
    line-height:28px;
    font-weight:900;
    color:#ccc;
    }
p {
    font:11px/20px verdana, arial, helvetica, sans-serif;
    margin:0px 0px 16px 0px;
    padding:0px;
    }
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a {
    color:#09c;
    font-size:11px;
    text-decoration:none;
    font-weight:600;
    font-family:verdana, arial, helvetica, sans-serif;
    }
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}

#Header {
    margin:10px 0px 10px 0px;
    padding:17px 0px 0px 20px;
    text-align: center;
    font-family: Albertus MT Lt;
    font-size: 18px;
    /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
    height:33px; /* 14px + 17px + 2px = 33px */
    border-style:solid;
    border-color:black;
    border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
    line-height:11px;
    background-color:#eee;
    voice-family: "\"}\"";
    voice-family:inherit;
    height:14px; /* the correct height */
    }
body>#Header {height:14px;}

#Content {
    margin:0px 50px 50px 200px;
    padding:5px;
    }

#Menu {
    position:absolute;
    top:90px;
    left:20px;
    width:172px;
    padding:10px;
    background-color:#eee;
    border:1px dashed #999;
    line-height:17px;
/* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:150px;
    }
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}


Here is my layout:
<html>
<head>
  <title>Moms: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'layout1' %>
</head>
<body>
<div style="text-align: center; font-family: Albertus MT Lt; font-size: 30px"> ATG Requirements Database </div>
<div id="Header"> Minutes of Meetings </div>
<br>

<div id="Menu">
    <a> Requirement Search</a><br />
    <a><%= link_to "By Title", :controller=>'reqs', :action=>'index_by_title' %></a><br />
    <a><%= link_to "By Requirement", :controller=>'reqs', :action=>'index_by_req' %></a><br />
    <a><%= link_to "Issues", :controller=>'issues' %></a><br />
    <a><%= link_to "Reports", :controller=>'reqs', :action=>'reports' %></a><br />
    <a><%= link_to "Reference Data", :controller=>'reference', :action=>'list' %></a><br />
</div>

</div>
<div id="Content">
<p style="color: green"><%= flash[:notice] %></p>

<%= yield  %>
</div>
</body>
</html>

Re: Problem with header padding

I would try making the header div say:

[code css]
width = 100%;
[/code]

that should solve the error -- than if the screen expands, in theory the div will too.

matthewvb

Re: Problem with header padding

Thanks for the suggestion.  I was really hoping that would fix the problem but it didn't. I'm not sure what the deal is, that seemed to make sense.

Re: Problem with header padding

I tested your code in both FF & IE -- didn't notice any problems; it expanded fine with the page.

What versions of the browsers are you running?

matthewvb

Re: Problem with header padding

Hi tschoen16,

try using "display: block;" in your header div.