Menu
my body has a tiled background (blueness in attached image)
I need to horizontally centre some fixed width and height content (greenness), a fixed distance from the top of the page.
I then need to continue the background image of the centred content to the left and right extremities of the page, however wide the browser is (the purple)
The reason for this is that the green content has a "hole" in it, which allows the body background to show through. If this wasnt a requirement id make the purpleness a 100% width div which wraps the content, and simply give it the tiled background image.
So far i've managed this:
<div id="Left"></div>
<div id="Right"></div>
<div id="Content"></div>
#Left
{
width: 50%;
margin-right: 480px;
position: absolute;
top: 50px;
right: 50%;
height: 525px;
background: transparent url(/images/purple.png) repeat-x scroll center top;
}
#Right
{
width: 50%;
margin-left: 480px;
position: absolute;
top: 50px;
left: 50%;
height: 525px;
background: transparent url(/images/purple.png) repeat-x scroll center top;
}
#Content
{
position: absolute;
top: 50px;
left: 50%;
margin-left: -480px;
width: 960px;
height: 525px;
background: transparent url(/images/green.png) no-repeat scroll center top;
}
Which does work, except the page has a horizontal scroll bar with the right hand purpleness extending for some way. How can i overcome this?
I can't spoof the hole by simply duplicating the background, and i'd like to avoid putting an overflow-x: hidden on the body.
Edit: I also need to have a variable height page, as the given 525px height may be much larger and therefore the page will need to v-scroll.
This needs to work in IE7+, FF, Safari
Thanks
452
I think this should do the trick:
<html>
<head>
<style type="text/css">
body
{
overflow-x: hidden;
width: 100%;
margin: 0;
padding: 0;
}
#Left
{
width: 50%;
margin-right: 480px;
position: absolute;
top: 50px;
right: 50%;
height: 5525px;
border: solid 2px purple;
}
#Right
{
width: 50%;
margin-left: 480px;
position: absolute;
top: 50px;
left: 50%;
height: 5525px;
border: solid 2px purple;
}
#Content
{
position: absolute;
top: 50px;
left: 50%;
margin-left: -480px;
width: 960px;
height: 5525px;
border: solid 2px green;
}
</style>
</head>
<body>
<div id="Left"></div>
<div id="Right"></div>
<div id="Content"></div>
</body>
</html>
I added styles to the body tag (to prevent the horizontal scroll bar), and I used a margin of "auto" on the Content div (not sure if it is necessary, but that is how I would do it).
Let me know if there's something I missed.
EDIT:
I put the absolute positioning back on the content div. GD you Internet Explorer...
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
