Mon, 2010-03-15 17:27
I am trying to keep a logo on the left side fixed in place while all the content to the right is in a 700px wide box that centers between the logo on the left, and the browser's edge on the right, without the logo being overlapped or content being hidden. Hoping for a scroll bar when content is off screen, and always see the logo in the same place. Here is the code:
<div id="wrapl"> <div id="logo"> <p> Our Logo Text at Bottom of Box </p> </div> </div> <div id="wrapr"> <div id="header"> <div id="menu"> <ul> <li class="active"><a href="#" accesskey="1" title="">Program</a></li> <li><a href="#" accesskey="2" title="">MIssion</a></li> <li><a href="#" accesskey="3" title="">In the News</a></li> <li><a href="#" accesskey="4" title="">Company Profile</a></li> </ul> </div> </div> <div id="video"> <div id="top-video"> <p> </p> <p> </p> <p> </p> <p><a href="#"><img src="images/video_gallery2.gif" alt="" width="700" height="299" /></a></p> </div> </div> <div id="header"> <div id="menu"> <ul> <li><a href="#" accesskey="5" title="">Careers</a></li> <li><a href="#" accesskey="6" title="">Contact Us</a></li> <li><a href="#" accesskey="7" title="">Legal Disclaimer</a></li> <li><a href="#" accesskey="8" title="">Privacy Policy</a></li> </ul> </div> </div> <div id="footer"> <p id="copy">© us. All rights reserved worldwide.</p> </div> </div>
and here is the CSS
body { margin: 0; padding: 0; font: Verdana, Arial, Helvetica, sans-serif; background: #000000 url(images/p003small.jpg) no-repeat; } h1, h2, h3 { margin: 0; font-weight: normal; } h2 { font-size: 2em; } h3 { font-size: 1.4em; } img { border: none; } a { color: #FFFFFF; } a:hover { text-decoration: none; color: #FF0000; } /* Header */ #header { width: 700px; height: 100px; text-align: center; } /* Wrap left*/ #wrapl { position:relative; width: 280px; height: 900px; float: left; } /* Wrap right*/ #wrapr { position:relative; width: 740px; height: 900px; margin: 0 auto; } /* Logo */ #logo { position:absolute; left:2px; top:50px; background: url(images/logo5.png) no-repeat top center; width: 258px; height: 84px; float: left; } #logo p { letter-spacing: -2px; font-size: 16px; text-align:center; vertical-align:bottom; padding-bottom:0; color: #000000; font-weight: bold; } //* Menu */ #menu { height: 70px; } #menu ul { margin: 0; padding: 0; list-style: none; } #menu li { display: inline; } #menu a { display: block; float: left; width: 140px; height: 45px; padding-top: 25px; text-align: center; letter-spacing: -2px; font-size: 20px; color: #FFFFFF; } #menu a:hover { color: #1A1A1A; } #menu .active a { background: url(images/img03.jpg) no-repeat; color: #FFFFFF; } /* Video */ #video { width: 700px; height: 480px; } #top-video h2 { height: 1.4em; font-size: 1em; } #top-video p { margin: 0; padding: 0 0 10px 0; } /* Footer */ #footer { padding: 40px; } #footer p { text-align: center; font-size: smaller; color: #FFFFFF; } #footer a { color: #FFFFFF; }
And here is an image of what I am trying to do: