Hi,
That’s a bit of a monstrosity What happened to the succinct code I gave you?
Didplay:table doesn’t work in IE7 and under so you can’t really use it yet unless you are going to offer alternative code for ie7 and under.
Absolute positioning is unreliable where tables are concerned anyway and you probably should have created a two row css table in the middle with the content in the bottom row aligned to the bottom. As it is your content overlaps should the top line wrap so what you are asking for isn’t a workable idea anyway.
You also have much too much code and ids that are much too long and unmanageable and too descriptive to be useful. You have about 40 characters of actual content and about 600 characters of mark up!!
I would so it more simply like this with a 70% reduction in css and html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="Content-Language" content="en" >
<title>Master Index</title>
<style type="text/css">
/* ============================================
* Your basic reset
*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
img {
display: block;
border: none;
}
body {background-color: LightGreen;}
#header {
background:#add8e6;
padding:0 55px;
position:relative;
zoom:1.0;
min-height:50px;
}
* html #header {height:50px}
#header h1 {
font-size:1.2em;
line-height:20px;
padding:0 0 10px;
}
#header h1 img{
position:absolute;
left:0;
top:0;
}
#header p{line-height:20px;}
#header p img{
position:absolute;
right:0;
top:0;
}
#main {clear:both;}
</style>
</head>
<body>
<div id="header">
<h1><img src="http://zayso.org/ngames/NatlGames_Logo_2012_sm.jpg" height="50" width="50" alt="Logo Left">Header along the top Header along the topHeader along the top </h1>
<p>Header Line Along the Bottom<img src="http://zayso.org/ngames/NatlGames_Logo_2012_sm.jpg" height="50" width="50" alt="Logo Right" ></p>
</div>
<div id="main">
<h2>Main content</h2>
</div>
</body>
</html>
I would even remove those images to the background as they look more like decoration than logos as such.
The text on the bottom line is in the flow rather than absolute and should the top line wrap then the text will move down as appropriate and not overlap as in your example.