Absolute problem

[NVDW]

I'll try to explain what's wrong.

This is in my .css

#content_left {
	position: absolute;
	left:20px;
	top:140px;
	width: 150px;
}
 
#content_mid {
	margin: 0 190px 0 190px;
	min-width: 600px;
}
 
#content_right {
	position: absolute;
	right:20px;
	top:140px;
	width: 150px;
}

As you can see this creates 3 parts of the side: left, middle and right.
Now when i make the window smaller so when i drag the right side to the left, the content_right will go with it and overlap the content_mid.

Does anyone know how i can solve this?

[onwired]

As you can see this creates 3 parts of the side: left, middle and right.
Now when i make the window smaller so when i drag the right side to the left, the content_right will go with it and overlap the content_mid.

Does anyone know how i can solve this?

What would you like to happen instead? That will affect what solution is appropriate...

The righthand box will overlap the middle one only when the viewing window reaches the minimum height you specified (600px). So you could remove that rule and it doesn't overlap. But assuming you want the center column not to contract smaller than 600px, I'm pretty sure overlapping will have to occur with absolutely positioned elements and a fluid, min-width center box.

Here are three options: 1. Add a 'z-index' value to your center content box, so that when they converge the righthand column will 'underlap' instead. 2. Fix the width of the center column, so that it's not fluid. 3. There's a floated solution for 3 columns I've seen somewhere, that when the browser size gets to a certain minimum width, the right column clears and becomes a footer... can't recall where I've seen it, but I'll take a look.

Cheers,
Nathan

[onwired]

Also, here's a listing of many 3-column CSS solutions:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

[NVDW]

Thanks for the help guys, but i can't find a good layout without the first 2 points onwired mentioned.

The righthand box will overlap the middle one only when the viewing window reaches the minimum height you specified (600px). So you could remove that rule and it doesn't overlap. But assuming you want the center column not to contract smaller than 600px, I'm pretty sure overlapping will have to occur with absolutely positioned elements and a fluid, min-width center box.

Exactly

Well for now i'll just use a z-index. If someone finds or already has a solution please post here because it might be interesting for other people aswell. Thank you

[CaryD]

Add this to your style sheet:

body {
  position: relative;
  min-width: 980px;
}

Embed this in the head of your html, after any other embedded styles or style sheet links:

<!--[if lte IE 6]>
<style type="text/css">
body {
width:expression( documentElement.clientWidth < 980 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 980 ? "980" : "auto") : "980px") : "auto" );
}
</style>
<![endif]-->