D12Eminem989 Posted August 21, 2009 Share Posted August 21, 2009 Hello, I have a problem with my header not aligning correctly, I have 2 images in the header for the right and left side and a middle background that repeats with a header logo and ads on the right of the logo. Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>Untitled Document</title> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> </head> <body> <div class="hdr"> <div id="body"> <div id="hdrbl"></div> <div id="hdrbm"> <div id="hlogo">My logo here</div> <div id="hads">Google ads here</div> </div> <div id="hdrbr"></div> </div> </div> </body> </html> Here is my CSS: body { background: #012853; color: #C1C1C1; font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin: 10px 10px 10px 10px; padding: 0px; } .hdr #body { /* Overall body for the header */ padding: 0; height: 104px; } .hdr #hdrbl { /* Header left image */ background-image: url(images/style/img_01.gif); width: 82px; height: 104px; float: left; } .hdr #hdrbm { /* Header middle background */ background-image:url(images/style/img_03.gif); background-repeat: repeat; height: 104px; width: auto; float: none; } .hdr #hdrbr { /* Header right image */ background-image:url(images/style/img_02.gif); width: 86px; height: 104px; float: right; } .hdr #hlogo { /* Header logo */ padding: 0; height: 104px; } .hdr #hads { /* Header right ads */ float: right; padding-right: inherit; } Quote Link to comment Share on other sites More sharing options...
haku Posted August 21, 2009 Share Posted August 21, 2009 I think your problem is caused because of..... oh wait. You didn't even tell us what your problem was. Quote Link to comment Share on other sites More sharing options...
D12Eminem989 Posted August 21, 2009 Author Share Posted August 21, 2009 The problem is the whole right side isnt aligning. Look here: http://dev.bbhosting.org/ Quote Link to comment Share on other sites More sharing options...
haku Posted August 21, 2009 Share Posted August 21, 2009 Hows it supposed to look? Quote Link to comment Share on other sites More sharing options...
D12Eminem989 Posted August 21, 2009 Author Share Posted August 21, 2009 It's supposed look like this: http://i27.tinypic.com/rviofm.jpg Quote Link to comment Share on other sites More sharing options...
Cetanu Posted August 21, 2009 Share Posted August 21, 2009 Try: .hdr #hdrbl { /* Header left image */ background-image: url(images/style/img_01.gif); width: 82px; height: 104px; float: left; } .hdr #hdrbm { /* Header middle background */ background-image:url(images/style/img_03.gif); background-repeat: repeat; height: 104px; width: auto; float: left; } .hdr #hdrbr { /* Header right image */ background-image:url(images/style/img_02.gif); width: 86px; height: 104px; float: left; } I changed them all to float left...think of it like they're stacking next to each other. Might work. Oh, and for good measure, right after the header is defined in the html you may want to use something like <div class="clear"></div> .clear{ clear: both; } or <div style="clear: both;"></div> That will stop them from shifting. Quote Link to comment Share on other sites More sharing options...
haku Posted August 21, 2009 Share Posted August 21, 2009 Change your HTML to this: <div id="header_background"> <div id="header_right"></div> <div id="header_left"></div> </div> Then you can set your CSS like this: #header_background { background: // set your repeating background here width: 100%; height: // set the height of the background image here } #header_left { float:left; width: // set the left end width here height: //set the same height as above } #header_right { float:right; width: //set the right end width here height: // set the same height as above } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.