ansaurus

Question

Answer 1

A:

usually I can get around this by setting:

#content{
  margin-right:auto;
  margin-left:auto;
}

You can do away with Left and Right then (unless of course you want to keep them).

Then to get the hole just make the background of the content a png image and make the hole transparent. It'll appear transparent on the div then.

Daniel Hanly 2010-08-19 15:28:28

I do want to keep them, the purple is a continuation of the green image. "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)"

Andrew Bullock 2010-08-19 15:30:02

Perhaps you can add {width:25%; float:left;} and {width:25%; float:right;} onto the Purple divs to keep them where they aught to be

Daniel Hanly 2010-08-19 16:12:08

You may have to mess with the rather fiddly positioning on that one though

Daniel Hanly 2010-08-19 16:12:27

@Daniel where did you get 25% from?

Andrew Bullock 2010-08-19 16:37:36

Answer 2

+1 A:

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...

Stargazer712 2010-08-19 15:37:02

this works, but this also removes the vertical scroll bar if anything goes below the page fold (admittedly the original question doesnt stipulate this). is there a way around this?

Andrew Bullock 2010-08-19 15:43:04

@Stargazer712... that wouldn't work. The Left and Right `<div>`s are both 50% which means they would cover all of the area which means the background image 'green.png' would have a purple hole in the middle, not blue.

Hristo 2010-08-19 15:46:38

@Hristo it works just fine, note the margins ;)

Andrew Bullock 2010-08-19 15:48:13

@Andrew... ahh I missed that part. Sorry!

Hristo 2010-08-19 15:49:51

@Andrew: Replacing "overflow:hidden" with "overflow-x:hidden" works on every browser I checked (FF3 and IE6).

Stargazer712 2010-08-19 16:07:29

@Stargazer i thought overflow-x was css3? im seeing some really weird behaviour in IE (surprise surprise) your html above works, mine set up the same doesnt. if i copy the above html over mine exactly and refresh, _that_ doesnt work!!!, bloody IE!!!!!

Andrew Bullock 2010-08-19 16:34:35

I am not sure on the overflow-x, but it works in IE6, so it can't be CSS3. I copied and pasted the exact code that I am using to say that it works (note the borders instead of background images).

Stargazer712 2010-08-19 16:45:27

Answer 3

A:

<!doctype html>
<style>
body {
    background: blue;
    margin: 0;
}
#wrapper {
    height: 300px;
    margin-left: 50%;
    position: relative;
    top: 100px;
}
#left {
    background: magenta;
    height: 300px;
    margin-right: 300px;
    position: absolute;
    right: 100%;
    width: 100%;
}
#center {
    border: 100px solid lime;
    float: left;
    height: 100px;
    margin-left: -300px;
    width: 400px;
}
#right {
    background: magenta;
    height: 300px;
    overflow: hidden;
}
</style>

<div id="wrapper">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

I used absolute positioning for the left side, since you never get a scrollbar there anyway.
I floated the center div, so I could use the "secret benefit" of overflow to fill out the right side of the screen without creating a scrollbar.
I used a border to the center div to show that the body's blue background does indeed "show through", but you can of course use a background image instead.

(I tested it in Firefox 3.6 and IE8 in IE8 and IE7 modes.)

mercator 2010-08-19 18:29:05

ansaurus

tags:

views:

answers:

tricky css positioning question

related questions