3 column <div> problem 1

[mhamilton3]

Hello all,
I have a site that I have set up using CSS (I am new to CSS). I have a left, center, and right div. The site is medifile.congoleum.com. The <div>s are defined below.

#leftcontent {
	position: absolute;
	left:0px;
	top:0px;
	width:185px;
}
#centercontent {
	background:#fff;
	top:0px;
	height:100%;
   	margin-left: 184px;
   	margin-right:184px;
	voice-family: "\"}\"";
	voice-family: inherit;
   	margin-left:186px;
   	margin-right:186px;
	}
html>body #centercontent {
	margin-left: 186px;
	margin-right:186px;
}
#rightcontent {
	position: absolute;
	right:0px;
	top:0px;
	width:185px;
	background:#fff;
}

My desire is to have a left panel of 185, a right panel of 185, and a middle that floats. I desire to have the middle with a minimum of 430 so I would not expect scroll bars to show up until the site got to 600 pixels wide. What happens to me is the right <div> pushes the middle and then finally sits on top of the left. I'm guessing there is a way around this, but I can not find it. Any suggestions?

 

[SlykFX]

easiest way to do this that ive found is

#leftcontent {
    float: left;
    clear: left;
    width:185px;
}
#centercontent {
    background:#fff;
    height:100%;
    voice-family: "\"}\"";
    voice-family: inherit;
}
#rightcontent {
    float: right;
    clear: right;
    width:185px;
    background:#fff;
}

but make sure u code them left right center as some browsers get messed up with anyother method
i.e.
<div id="leftcontent">Left Contents</div>
<div id="rightcontent">Right Contents</div>
<div id="centercontent">Centre Contents</div>

hope that works for ya

I can't be bothered to have a sig!

 

[mhamilton3]

I tried that and it was no good. My desire is for the page not to go any smaller than 600 pixels. If it does, I would like it to act as if it were a table. This method brought to center content below the left content and the right content just overwrote the center.

 

[Vragabond]

Hi, your solution requires a wrapper div and a great poperty called min-width. Too bad, IE does not support that, but luckily there is a solution for that. Here's how to do it:

<style type="text/css">
#wrapper {
	width: 100%;
	position: relative;
	min-width: 600px;
	width: expression(document.body.clientWidth < 600? "600px": "100%" );
}
</style>

<div id="wrapper">
...all your page...
</div>

This will not let the page become narrower than 600px. However, your right column will still overlap your main column, since 430px + 185px + 185px = 800px rather than 600px. If you change 600px in the above code to 800px nothing overlaps anymore. Hope it helps.

 

[SlykFX]

oops

#centercontent {
    background:#fff;
    height:100%; <-- supposed to be pixel width not percentage
    voice-family: "\"}\"";
    voice-family: inherit;
}

also missed the outer div

but that vragabonds way above works if u want only a minimum width


I can't be bothered to have a sig!