So I've tried different ways of aligning this image to the right but if just keeps jumping off the page! It's quite strange. Wondering if anyone can help me out with this! It's my first time using CSS, so please be kind! CSS * { margin: 0; padding: 0; } body { font-family: Helvetica; font-weight: bold; margin: 0; padding: 180px 72px 0 216px } #pagewrap { margin: 0; } #sidebar { top: 0; left: 0; position: fixed; text-align: center; font-size: 18pt; float: left; width: 148px; height: 100%; margin: 0; padding: 0; background-color: red; } #header { top: 0; position: fixed; left: 148px; height: 148px; width: 100%; background-color: blue; } ul#nav { list-style: none; } .align-right { float:right; margin: 0 0 15px 15px } .align-left { float:left; margin: 0 0 0 0; } Code (markup): HTML <html> <head> <title></title> <link rel="stylesheet" href="style.css" media="screen" /> <script type="text/javascript"> var GB_ROOT_DIR = "C:\Users\HandsomeJake\Documents\Arty Farty\Future Future Site\Website\greybox"</script> <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" /> </head> <body> <a href="Media/Photos/1.jpg" title="Test" rel="gb_imageset[FF_Gallery]"><img src="Media/Photos/1.jpg"> </a> <a href="Media/Photos/2.jpg" title="Test" rel="gb_imageset[FF_Gallery]"><img src="Media/Photos/2.jpg"> </a> Lorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass Lorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my assLorem Ipsum my ass <div id="pagewrap"> <div id="sidebar"> <img src="Media/FutureFutureTopLeft.png" align="top"> <ul id="nav"> <li>NEWS</li> <li>SHOWS</li> <li>PHOTOS</li> <li>PRESS</li> <li>LINKS</li> <li>STORE</li> <li>CONTACT</li> </div> <div id="header"> <img src="Media/FredHead.png" class="align-left"> <img src="Media/ObamaHead.png" class="align-right"> </div> </div> </body> </html> Code (markup):
<a href="Media/Photos/1.jpg" title="Test" rel="gb_imageset[FF_Gallery]"><img src="Media/Photos/1.jpg"> </a> <a href="Media/Photos/2.jpg" title="Test" rel="gb_imageset[FF_Gallery]"><img src="Media/Photos/2.jpg"> </a> Code (markup): use these codes under div tag may solve ur problem.
As well, there are other problems here. - Applying position to an element necessarily means that same element should not be floated. The #sidebar is receiving both. - The combined widths of the fixed left sidebar (148px) and the header (100% of its parent, which is effectively the full body here) means there is a combined width greater than the body width. So anything floated right within the header will be forced offscreen. You can pull it back onscreen by reducing that width% to some value below 100%, but it's just a band-aid solution. Perhaps the best thing to do here would be to look at something like the 2 column layouts described at bonrouge.com. You could work your content into one of those quite easily. Bonrouge's fluid layouts give a specific width to the navigation column, but no width to the main content column - the latter is free to expand according to the user's screen size. So no problems with anything being forced offscreen.