CSS - 3 Col Layout With Middle Fixed Width

I need a combination of this:

http://bonrouge.com/3c-hf-fixed.php

and this:

http://bonrouge.com/3c-hf-fluid.php

I need the middle column to be a fixed width and the outer two to be fluid.

I also need to maintain the 100% with header and footer at top and bottom respectively.

Any ideas how to do this?

Thanks.

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....

Hi everyone!

i have this mockup in fireworks for my personal site..
problem is... i cant put it together the way i like it using CSS

here is my mockup and the slices ive made...

http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image

im sorry for the link... i cant seem to post a proper one

do u guys know how i should go about it?

the middle column should be fixed width but the right and left column should be fluid

thanx

Hi Guys,

I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is.

I'm trying to get it to be a set width. I can't quite get it figured out.

Here is the link to the current layout (made to be generic).

It's a layout I got from a CCS class.

http://65.175.116.253/design/demo.html

The css is here

http://65.175.116.253/design/css.css

The entire package can be downloaded here

http://65.175.116.253/design/design.rar

Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy.

http://65.175.116.253/design/demo.jpg

Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever.

Here is the CSS



Code:

/*--- Generic Styles ---*/

body 
	{
	background: #e3edc2; color: #333;
	font: .8em,  Arial, verdana, sans-serif;
	margin: 0; 
	padding:0px;

	}
	
	#main {width:840px; margin:18px auto 0 auto; _text-align:left;}

a
	{
	color: #686397;
	}

a img
	{
	border: 0px none;
	}

p
	{
	margin: 0 0 1em;
	}
	
	
.smallboldtext 	
	{ 
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: .7em;
	font-weight: bold;
	}
	

.mediumtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	}
	
.mediumboldtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	font-weight: bold;
	}
	
.largetext 
	{
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: 1.5em;
	}
	

	/*--- Header Styles ---*/
	
	
#header 
	{
	margin-bottom: 1.75em; 
	padding-top: 1px;
	background: #abd240;
	}
	
	
#navbar 
	{	
	margin: 0; 
	padding: 0.5em 3em;
	background: #686397; 
	color: #fff;
	}
	

#navbar li
	{
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #99c;
	font-weight: bold;
	
	}


#navbar li.last 
	{
	border: 0px none;
	}
	

#navbar a
	{
	color: #d4ec84;
	text-decoration: none;
	}
	

#today
	{
	text-align: right;
	margin-top: -1.66em; padding: 0 2em 0 0;
	color: #fff;
	line-height: 1;
	}
	
	
	/*--- Content Styles ---*/
	
#content 
	{
	float: left;
	padding: 0 20em 4em 3em;
	
	}
	

#content h1
	{
	background: #fff; color: #686397;
	font-size: 1.5em;
	margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
	}

	
#content h1 b
	{
	color: #b0d742;
	}
	
	
#content h2
	{
	margin: 0.5em 0; padding-bottom: 0.25em;
	border-bottom: 1px solid #b0d742;
	font-size: 1.5em;
	}
	
	
	/*--- Content Styles ---*/
	
table.basic
	{
	border: 0px;
	width: 100%;
	border-collapse: collapse; 
	}
	
table.basicborder
	{
	border: 2px solid #b0d742;
	width: 505px;
	border-collapse: collapse; 
	}

table.mainsearch 
	{
	border: 2px solid #b0d742;
	width: 415px;
	border-collapse: collapse; 
	}
	


/*--- Sidebar Styles ---*/



#sidebar 
	{
	float: right;
	width: 17em;
	margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
	}
	
#sidebar div h3{
	background: #9b96ca;
}
#sidebar form_div 
	{
		margin: 0; padding: 0.8em;
	}
	
#sidebar div{
	background: #3a3c2d; color: #fff;
	padding: 0 1em 1em;
	margin-top: 0.75em;
}
#sidebar div h3{
	font-size: 1.25em;
	margin: 0 -0.8em; padding: 0.4em 0.8em;
	text-transform: lowercase;
}
	
	
#whatiscompany h4{
	margin: 0 0 0.5em; padding: 0.5em 0;
	border-bottom: 1px solid #fff;
	font-weight: normal;
}
#whatiscompany p:first-line{
	font-style: italic;
}
	
	

/*--- Footer Styles ---*/

#footer 
	{
	clear: both;
	padding: 1.5em 3em;
	background: #a0c63a;
	height: 15px;
	}

#footer p 
	{
	margin: .1em;
	}

#footer a 
	{
	color: #333;
	text-decoration: underline;
	}

Hello,
im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer.

-Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header

-the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need.

Thanks in Advanced
Samer