biggieuk Posted September 7, 2011 Share Posted September 7, 2011 Hi all, I have a question that may be related more to the jQuery forum if this is not possible with CSS. Here a visual of my layout The black line is the area that I want to be visible to 1024x768 users, however as the header is protruding slightly, it is showing this part and chopping off the right hand side resulting in horizontal scroll bars. Here is my current DOM structure sample: <body> <wrapper> <header></header> <main></main> </wrapper> </body> Here is a css sample: body{ background:url(../images/bg_top.gif) repeat-x 0 0; font-family: 'Droid Sans', arial, serif; font-size:12px; color:#333; } #wrapper{ width:1052px; margin:0 auto; } #header{ width:100%; height:177px; background:url(../images/header_bg.jpg) no-repeat; } #main{ background:url(../images/content_bg.png) repeat-y; padding:13px 55px; position:relative; min-height:400px; z-index:1; } What is the best method to have only the black marked area show and hide the protruded part of the header at 1024x768 resolution? Thanks for your help. Quote Link to comment Share on other sites More sharing options...
Frank P Posted September 7, 2011 Share Posted September 7, 2011 Here a visual of my layout The black line Where? Which black line? Quote Link to comment Share on other sites More sharing options...
wright67uk Posted September 8, 2011 Share Posted September 8, 2011 That's because wrapper is 1052 Header is 100% of this so your line will also be 1052 Put header outside of wrapper possibly or adjust the size of your image Quote Link to comment Share on other sites More sharing options...
biggieuk Posted September 8, 2011 Author Share Posted September 8, 2011 Sorry, here's the image: Quote Link to comment Share on other sites More sharing options...
Frank P Posted September 8, 2011 Share Posted September 8, 2011 There's nothing in your code that would generate the black lines, and if I convert your code to valid and rendered code, and change the wrapper width to 980px, there does not seem to be a problem: <!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> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body{ background: pink url(../images/bg_top.gif) repeat-x 0 0; font-family: 'Droid Sans', arial, serif; font-size:12px; color:#333; } #wrapper{ width:980px; /* from 1052px */ margin:0 auto; } #header{ width:100%; /* not necessary, delete if border or padding is added */ height:177px; background: blue url(../images/header_bg.jpg) no-repeat; } #main{ background: green url(../images/content_bg.png) repeat-y; padding:13px 55px; position:relative; min-height:400px; z-index:1; } </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="main"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
biggieuk Posted September 8, 2011 Author Share Posted September 8, 2011 Thanks for your reply. The black line was added by me for illustration purposes. The lack line represents what I want the user to see at 1024x768 resolution. I am looking for a way to show only the black highlighted area rather than the left hand padded area at 1024 resolution as this causes horizontal scroll bars. Thanks Quote Link to comment Share on other sites More sharing options...
Frank P Posted September 8, 2011 Share Posted September 8, 2011 OK, but like I wrote, if I convert your code to valid and rendered code, and change the wrapper width to 980px, there does not seem to be a problem. Perfectly centered and vertically lined up without any horizontal scrollbars. 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.