3 replies [Last post]
mslibby
mslibby's picture
Offline
newbie
Last seen: 17 years 15 weeks ago
Timezone: GMT-8
Joined: 2004-03-08
Posts: 5
Points: 0

I am new to CSS and am attempting to set up a 3 column site without using tables. You can see the test page here:

https://www.crpud.net/3coltest.shtml

What I want is for the left and right columns to be a fixed width and the center column to be fluid. I had no problem getting to this point, but I can't figure out how to set the minimum width for the whole page. I tried creating a container div with a min-width attribute and putting all the other divs inside it, but it didn't work. Currently, if you re-size the page, eventually the center column just disappears behind the other columns. I want a minimum page width of 740 pixels, so that the center column has a minimum size of 340, and if you re-size below that, you get a scroll bar.

I'm sure this is probably pretty simple, but I'm sort of swimming in CSS at this point!

Any help is appreciated.
Smile
Libby

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 1 week ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Setting minimum page width?

Unfortunately you link appears not to work.

Also unfortunately if you're using IE you'll find that it does infact not support the min-width function so you'll get no joy that way.

I did find the following hack that seems to work, it does however render your CSS non valid.... So it's a bit of a nuisence.

#container
{
min-width:740px;
width:expression(document.body.clientWidth < 740? "740px": "auto" );
}

Maybe someone has a better idea?

mslibby
mslibby's picture
Offline
newbie
Last seen: 17 years 15 weeks ago
Timezone: GMT-8
Joined: 2004-03-08
Posts: 5
Points: 0

Thanks :-)

Thanks for the hack! I'll try it. I would prefer something that validates, but you can't always have everything exactly how you want it!

Sorry you couldn't find the page - I moved it and forgot to update the link - you can now find it here:

http://users.crpud.net/crpud/3coltest.shtml

Smile
Libby

mslibby
mslibby's picture
Offline
newbie
Last seen: 17 years 15 weeks ago
Timezone: GMT-8
Joined: 2004-03-08
Posts: 5
Points: 0

More Min Width Nightmares

OK, I am determined to win this battle!

I need a 3 column site - left and right columns fixed width - center column FLUID but with a min width. It works in Moz and Opera but not IE. I've been googling for a week now and trying every hack I find.

Sven Tofte's suggestions looked the best to me, but it still ain't workin'.

http://www.svendtofte.com/code/max_width_in_ie/

I set up a couple of test pages to see if I can't get this to work. One has an image to set the min width for the center column, the other doesn't.

With img:
http://users.crpud.net/crpud/test-min-width.htm

Without img:
http://users.crpud.net/crpud/test-min-width2.html

Here's the css I have:

/* *** Generated by www.csscreator.com *** */
body {
 width: 100%;
 min-width: 740px;
 margin: 0px;
 padding: 0px;
 }
 
p {
border:1px solid red;
min-width:320px;
width:expression(document.body.clientWidth < 320? "320px": "auto" );
}

#leftcol{
 width:180px; 
 float:left; 
 position:relative; 
 margin-left:-180px; 
 margin-right:1px; 
 }
 
#outer{ 
 border:solid white 0px; 
  /*/*/ border-left-width: 180px ;  /* left column width. NN4 hack to hide borders */ 
border-left-color: #336699;   /* left column colour */ 
border-left-style: solid; 
 /*/*/ border-right-width: 180px; /* right column width. NN4 hack to hide borders */ 
border-right-color: #6699FF;  /* right column colour */ 
border-right-style: solid; 
  background-color: #FFFFFF; /* center column colour */ 
width: auto; 
 } 
 
#rightcol{
 /*/*/ width:180px; /* hack keeps NN4 right column right? */ 
 float:right; 
position:relative; 
  margin-right:-180px; 
 margin-left:1px; 
} 
 
#inner{margin:0; width:100%;}
 
#maincol{ 
 float: left; 
 width: 100%; 
 position: relative; 
 margin: 0 -8px 0 -2px; 
 }
 
#outer>#inner { border-bottom: 1px solid #FFFFFF;  }
 
.clr{clear:both;}
 
.content{padding:5px;} /*padding for content */ 
 
#header .content{padding-bottom:0;} /*padding bottom 0 to remove space in IE5 Mac*/ 
 

 
 /*printer styles*/ 
@media print{ 
/*hide the left column when printing*/
#leftcol{display:none;} 
#outer{border-left:0;} 

/*hide the right column when printing*/
#rightcol{display:none;} 
#outer{border-right:0;} 
}

HTML for no-img page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CssCreator-->HTML 4.01 Strict Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" >
<link rel="stylesheet" href="test-min-width.css" type="text/css" >
</head>
<body>
 <!-- Generated at www.csscreator.com -->

	<div id="outer" >
 		<div id="inner">
 			<div id="leftcol" >
				<div class="content"> Left Column </div>
			</div>
			<div id="maincol" >
				<div class="content">
						<p>A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. A whole bunch of content goes here. </p>
					</div>
			</div>
			<div id="rightcol" >
				<div class="content"> Right Column </div>
			</div>

 			<div class="clr"></div>
		<!-- close inner and outer -->
		</div>
	</div>
</body>
</html>