chad.letterman
07-29-2009, 09:56 PM
Hello, this is my first post because i can't seem to figure out this html/css problem
I have this html markup code right here:
<body>
<div id="header">
<div id="center">
<div>text above image<br/>
multi-lines just to see the effect<br/>
resizing the window has on the background<br/>
of the "header" div
</div>
<div id="has_bg2">
<img src="http://www.logodesign.com/logo_design/wp-content/google-logo.jpg" />
</div>
</div>
</div>
</body>
with this css styling applied
<style type="text/css">
#header { width:100%; background:url(image/bg.png) repeat; }
#center { width:800px; margin:0 auto; }
#has_bg2 { background:url(image/bg2.png) repeat-x; }
/* this padding just for visual */
#has_bg2 img { padding:10px; }
</style>
LIVE DEMO:
http://personalmoneysource.com/bkup/test/
(to see the problem, re-size window smaller than the pink "center" box and scroll across to see how the background of the outer div appears)
THE SCENARIO:
As you can see there is a container div "header" containing the inner div "center" and the "center" div has two parts one block with a transparent background (in this case the content is some text) and another block with a background (content is an image of the Google logo). And the header div is 100% width and the center div is centered via 'margin: 0 auto' with a set width.
THE PROBLEM:
If you click on the live demo link i provided. there is no problem when the window is wider than the width of the "center" div but when you resize the window to a size smaller than the width set for the "center" div, you WILL NOTICE that the background of the "header" div shifting and it 'appears' to not contain the inner 'center' div.
The desired result i want is basically the background of the header not to shrink smaller than the center div but instead shrink wrap till the outer edge lines up with the center div inside and the scroll bar appears
other info:
- it occurs in firefox3.5 and ie7/8 therefore assuming it occurs in ie6 too)
- doc-type transitional or strict doesn't seem to have an affect
- tried in only on windows
if anyone can help me figure this one out,
or is there another better way of centering a block with a background in a container div with a background
thanks in advance
I have this html markup code right here:
<body>
<div id="header">
<div id="center">
<div>text above image<br/>
multi-lines just to see the effect<br/>
resizing the window has on the background<br/>
of the "header" div
</div>
<div id="has_bg2">
<img src="http://www.logodesign.com/logo_design/wp-content/google-logo.jpg" />
</div>
</div>
</div>
</body>
with this css styling applied
<style type="text/css">
#header { width:100%; background:url(image/bg.png) repeat; }
#center { width:800px; margin:0 auto; }
#has_bg2 { background:url(image/bg2.png) repeat-x; }
/* this padding just for visual */
#has_bg2 img { padding:10px; }
</style>
LIVE DEMO:
http://personalmoneysource.com/bkup/test/
(to see the problem, re-size window smaller than the pink "center" box and scroll across to see how the background of the outer div appears)
THE SCENARIO:
As you can see there is a container div "header" containing the inner div "center" and the "center" div has two parts one block with a transparent background (in this case the content is some text) and another block with a background (content is an image of the Google logo). And the header div is 100% width and the center div is centered via 'margin: 0 auto' with a set width.
THE PROBLEM:
If you click on the live demo link i provided. there is no problem when the window is wider than the width of the "center" div but when you resize the window to a size smaller than the width set for the "center" div, you WILL NOTICE that the background of the "header" div shifting and it 'appears' to not contain the inner 'center' div.
The desired result i want is basically the background of the header not to shrink smaller than the center div but instead shrink wrap till the outer edge lines up with the center div inside and the scroll bar appears
other info:
- it occurs in firefox3.5 and ie7/8 therefore assuming it occurs in ie6 too)
- doc-type transitional or strict doesn't seem to have an affect
- tried in only on windows
if anyone can help me figure this one out,
or is there another better way of centering a block with a background in a container div with a background
thanks in advance