Wed, 2009-10-21 09:35
Hi there, i have a problem with my header for the site i'm building, trying to achieve this:
I want the left handside to expand the full width of the browser, the blue, to extend the full width of browser and the graphical area be centred, i have achieved it using absolute positioning but get a scoll bar at the bottom which isn't good.
Current Code below:
Content for id "content" Goes Here
Thanks for any help in advance.
Wed, 2009-10-21 09:37
#1
<style
<style type="text/css"> <!-- #left { background-color: #999999; height: 140px; width: 100%; background-image: url(images/head_green_bg.jpg); background-repeat: repeat-x; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FF0000; border-right-color: #FF0000; border-bottom-color: #FF0000; border-left-color: #FF0000; position: absolute; top: 0px; left: 0px; } #content { background-color: #CCCCCC; width: 700px; margin-right: auto; margin-left: auto; position: relative; top: 140px; height: 300px; } #left #innerleft { background-color: #FFFFFF; float: right; height: 140px; width: 50%; background-image: url(images/head_blue_bg.jpg); background-repeat: repeat-x; } #new { height: 138px; width: 100%; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; position: absolute; top: 0px; left: 0px; } #new #innernew { margin-right: auto; margin-left: auto; width: 700px; background-image: url(images/main_header.jpg); height: 140px; position: relative; clear: none; } --> </style> </head> <body> <div id="left"> <div id="innerleft"></div> </div> <div id="new"> <div id="innernew"></div> </div> <div id="content">Content for id "content" Goes Here</div> </body> </html>
Wed, 2009-10-21 09:38
#2
<style
<style type="text/css"> <!-- #left { background-color: #999999; height: 140px; width: 100%; background-image: url(images/head_green_bg.jpg); background-repeat: repeat-x; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FF0000; border-right-color: #FF0000; border-bottom-color: #FF0000; border-left-color: #FF0000; position: absolute; top: 0px; left: 0px; } #content { background-color: #CCCCCC; width: 700px; margin-right: auto; margin-left: auto; position: relative; top: 140px; height: 300px; } #left #innerleft { background-color: #FFFFFF; float: right; height: 140px; width: 50%; background-image: url(images/head_blue_bg.jpg); background-repeat: repeat-x; } #new { height: 138px; width: 100%; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; position: absolute; top: 0px; left: 0px; } #new #innernew { margin-right: auto; margin-left: auto; width: 700px; background-image: url(images/main_header.jpg); height: 140px; position: relative; clear: none; } --> </style> </head> <body> <div id="left"> <div id="innerleft"></div> </div> <div id="new"> <div id="innernew"></div> </div> <div id="content">Content for id "content" Goes Here</div> </body> </html>
Wed, 2009-10-21 09:39
#3
<style
<style type="text/css"> <!-- #left { background-color: #999999; height: 140px; width: 100%; background-image: url(images/head_green_bg.jpg); background-repeat: repeat-x; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FF0000; border-right-color: #FF0000; border-bottom-color: #FF0000; border-left-color: #FF0000; position: absolute; top: 0px; left: 0px; } #content { background-color: #CCCCCC; width: 700px; margin-right: auto; margin-left: auto; position: relative; top: 140px; height: 300px; } #left #innerleft { background-color: #FFFFFF; float: right; height: 140px; width: 50%; background-image: url(images/head_blue_bg.jpg); background-repeat: repeat-x; } #new { height: 138px; width: 100%; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; position: absolute; top: 0px; left: 0px; } #new #innernew { margin-right: auto; margin-left: auto; width: 700px; background-image: url(images/main_header.jpg); height: 140px; position: relative; clear: none; } --> </style> </head> <body> <div id="left"> <div id="innerleft"></div> </div> <div id="new"> <div id="innernew"></div> </div> <div id="content">Content for id "content" Goes Here</div> </body> </html>