CSS - Three Column Center The Middle

hello,
well im try to make three columns, left,center,right.

the left and the right have fixed width,but the center colums should be stretched,

so if the left and right each is 200px the center should be the space left in the browser screen in the center.

Is it possible to do this using CSS divs?
Please this is urgent.

Thanks in Adanved
Samer

It's not letting me post links since I am a new member, so copy paste the link below. (it's an image of what looks wrong in the website)
img59.imageshack.us/i/52153657.jpg/

It loads correctly in Firefox and IE8, but the middle column breaks in ie7 and ie8 in compatibility mode.

By break I mean the middle column gets shifted to the right side of the middle column and below the right column (while still in the middle column)

I have also included the general layout and css below.

I have tried changing doc types and a few small things but nothing has even effected the appearance.

The website is in a layout like this:

html4strict Code:
Original - html4strict Code <div id="wrapper1"> <div id="wrapper2"> <div id="maincol"> <div id="leftcol"> </div> <div id="rightcol"> </div> <div id="centercol"> </div> </div> <div id="footer"> </div> </div> </div>

  

 <div id="wrapper1">


     <div id="wrapper2">


         <div id="maincol">


         


             <div id="leftcol">


             </div>


             


             <div id="rightcol">


             </div>


             


             <div id="centercol">


             </div>


             


         </div>


         


         <div id="footer">


         </div>


         


     </div>


 </div> 

css Code:
Original - css Code #centercol { position:relative; padding:0 200px; min-width: 520px; } #leftcol { position:relative; top:-10px; left:-10px; float:left; width:180px; margin:0 0 -10px 0; padding:10px; z-index:100; } #rightcol { position:relative; top:-10px; right:-10px; float:right; width:180px; margin:0 0 -10px 0; padding:10px; z-index:99; } #maincol { position:relative; margin:0; padding:10px; } #wrapper1 { position:relative; text-align:left; width:100%; min-width: 950px; background:#23415C url("images/side.gif") repeat-y top right; } #wrapper2 { position:relative; text-align:left; width:100%; background:url("images/side.gif") repeat-y top left; }

  

 #centercol {


     position:relative;


     padding:0 200px;


     min-width: 520px;


 }


 #leftcol { 


     position:relative;


     top:-10px;


     left:-10px;


     float:left;


     width:180px;


     margin:0 0 -10px 0;


     padding:10px;


     z-index:100;


     }


 #rightcol {


     position:relative;


     top:-10px;


     right:-10px;


     float:right;


     width:180px;


     margin:0 0 -10px 0;


     padding:10px;


     z-index:99;


 }


 #maincol {


     position:relative;


     margin:0;


     padding:10px;


 }


  


 #wrapper1 {


     position:relative;


     text-align:left;


     width:100%;


     min-width: 950px;


     background:#23415C url("images/side.gif") repeat-y top right;


 }


     


 #wrapper2 {


     position:relative;


     text-align:left;


     width:100%;


     background:url("images/side.gif") repeat-y top left;


 } 

Any ideas on how to resolve this problem would be great.

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

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.

So I have a page where the content itself will be an 800px wide light column down the center of the page. But the background (to the left and right of the column) I want to be a gradient lightblue. I would usually accomplish this by making the background color lightblue and simply attaching the gradient to the top using CSS. Then I would create a table for the center column and make it the light background color.

The problem is that on short pages, I want the center column to extend all the way to the bottom of the page, irregardless of the content. Unfortunately, height="100%" or it's CSS variants don't work for tables, cells, or even DIVS so I can't force the table to extend down to the bottom of the page. The only way it seems I could do this, then, is by using the body background image attribute or body background CSS to make the column color the background for the entire center of the document, but those attributes are already both used up creating the gradient.

Any thoughts on how I might go about this. A sample of what I'm getting at is at http://www.poweredpages.com/fdr/index2.php. There, you can see the background gradient and the column that should extend to the bottom, even if there's very little text.

Thanks,
Jeremy

Please forgive me if this is just a stupid mistake, I'm pretty much a CSS newbie.
I generated a CSS menu (http://www.webmaster-toolkit.com/css-menu-generator.shtml) and inserted it into my CSS file. The menu is ok, but it pushed my center column down so that it only touches at a corner, when it should be leveled up and touching along the side. Here's the relevant code:
Quote:
#c-col{
position: relative;
margin: 0px 74px 20px 180px;
border: 1px solid #003366;
background: #333366;
color: #CCFFFF;
padding: 20px;
z-index: 3;
}

.buttonscontainer {width: 174px;}

.buttons a {color: #333366;
border: 1px solid;
background-color: #336699;
padding: 2px;
padding-left: 3px;
font: 12px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
border-color: #9999CC #333366 #333366 #9999CC;
display: block;
margin: 0px;
width: 100%;
text-align: left;}

.buttons a:hover {border: 1px solid;
padding-left: 4px;
padding-top: 3px;
padding-bottom: 1px;
padding-right: 1px;
background-color: #6666CC;
border-color: #333366 #9999CC #9999CC #333366;
color: #333366;
text-decoration: none;}

Have I inserted it in the wrong place or is there something missing/redundant? I'd appreciate any suggestions.

Ok, so I'm really new to this, but I've spent several hours over the last few days tinkering with things but nothing I'm doing works: In my two column CSS layout my left navigational column is stuck hanging out underneath the center column. It looks like this both in IE and Firefox. I've searched around on here and haven't found anything, but maybe I'm not using the right keywords. Any help or suggestions for this newbie greatly appreciated!

My html code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />



  <title>Art</title>
<link href="style.css" rel="stylesheet" type="text/css" />
  
</head>
<body>
<!-- begin header -->
<div id="header"><center><img src="logo.jpg" alt="logo" /></center></div>
<!-- end header -->
<!--begin container div - no content should be outside of the container div -->
<div id="container">
        
		<!-- begin main content -->
        <div id="center" class="column">
		<br />
		<img alt="Still Life" src="slc08.jpg" height="391" width="784" />
		<h5>Still Life with Colour '08</h5>

		
		</div>
		<!-- end main content -->

        <!--begin left nav list -->		
		<div id="left" class="column">
		        <br />
		        <ul class="nav">
                        
		                 <li><a href="index.html">Home</a></li>
						 <li><a href="about.html">About the Artist</a></li>
		                 <li><a href="resume.html">Artist's Resume</a></li>
		                 <li><a href="gallery.html">Gallery</a></li>
		                 
		           
				</ul>
				
		
        </div>	
		<!--end left nav list -->
    <!--close content div -->
	</div>	
<!--begin footer information -->
<div id="footer">
        <center><p class="foot">Copyright 2008</p></center>
		</div>
<!-- end footer information -->
</body>

</html>

My CSS Code:
Code:

body{
	background-color: White;
	font-size: 16px;
	margin: 0;
	padding: 0;
}
#header{ 
background-color:#333;
height:150px;
}

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 100px;  /* RC width */
}

#left{ 
float:left;
width:200px; 
background-color:#afeeee; 
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}

#center { 
background-color:#ffffff; 
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}

#footer { 
clear:both;
background-color:#48d1cc;
height:100px;
}

/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
}

ul.nav {
	list-style: none;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: large;
}

ul.resume {
	list-style: disc;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	line-height: 1.3em;
}

#left a {
	border-bottom: 1px solid #333;
	border-top: 1px solid #333;
	display: inline;
	font-family: tahoma,verdana,sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 2.75em;
	margin: 0;
	margin-right: 2px;
	text-align: center;
	text-decoration: none;
}

#foot {
	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-small;
} 

OK, I'm back for another CSS lesson - this time on lists.

My site is designed with typical three-column layout. The left and right columns are floated and
the center column contains most of my content. Sometimes in the center column of a page I want
to include a list, either ordered or unordered. This page is a splendid example:
http://stallinswebdesign.com/vs/general_OfficersContactInfo.php.

I do not yet know how to manipulate the positioning of a list (and lots of other block-level things,
truth be told).

1. Can you share with me how to nudge this unordered list (with list-style-type set to none) to
the left a wee bit so that it lies about 1em to the right of that left border?

2. Can you share with me a CSS standards-based technique for marking up the first element of a
list so that it is left-adjusted and all of the following list elements are indented from it (and I
can adjust the amount of indentation), so the list looks like this:
Code:

My Team Euskaltel-Euskadi 2005 Orbea Orca is a kick-tail bike because
     every cyclist knows that orange and black are the fastest colors
     any bike that wins Frame of the Year and Bike of the Year is a winner
     the frame stiffness is top-shelf, and the power transfer is amazing

Or, if one can do that with semantic markup other than lists, please let me know.

Thank you all for looking; I appreciate your effort.

Hey all,

I have been working on a site in CSS which looks pretty much how we want it to look in FF, however IE is giving me all sorts of problems.

If you look at the following page http://www.mobileshop.com/3phones.com/viewphone.php in firefox you can see that the middle (white) column rests nicely between the two side columns, however, if you change to IE and look at the very same page then the middle column drops below the left side column.

This is my first time at a css design and i cant work out why it is doing it, also the main logo is supposed to be centered, in IE it is left aligned.

If you are viewing the source, you will see a tag soup of tables in the middle of the nice CSS, this is due to the fact that we pick up a feed and it dumps the data into our page. This will change to be pure CSS but i am running out of time to get the site launched first.

One final question, i downloaded the Tidy HTML validator for firefox. I managed to get my pages passed the W3c online checker, but tidy claimed there was still errors. I went through and fixed all them to get a happy green tick but then when going back to W3C validation some things failed. I was under the impression that Tidy was developed by W3C, so why do they give varying results regarding validation?

Thank you for your time.

Hello! I am in need of some help with my css. I know, I am a total newbie but need some help with getting the css working properly. It seems that some parts work for IE and other parts work for Firefox. It seems like my left bar shows differently in IE and Firefox. Furthermore I have checked with IE on Mac and the main body doesn't show correctly either. It is displayed too short, doesn't fill the box. If anyone please could take a look at the code and see if they can help me I would appreciate it.

Please anyone help me. You can see the page at:
http://www.galakse.no/test/index.php/tscm/news
The css is located he
http://www.galakse.no/test/design/tscm/stylesheets/tscm.css

Any and all help is very much appreciated!

Thank you!

Hi all,

I'm trying to achieve the following:

<div id="left">This column is of blue background, and stretches all the way to the left.</div>

<div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div>

<div id="right">This column is of red background, and stretches all the way to the right.</div>

Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this?

I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code:
Code:

	#left {
		background-color: blue;
		float: left;
		margin: auto;
		position: absolute;
	}
	#center {
 		background: #DFDFEB url(../images/body/top.jpg) no-repeat;
		width: 760px;
		margin: 0 auto;		
	}
	#right {
		background-color: red;
	}

Thanks in advance!

Hi

I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed...

html Code:
Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div>

  

    <div class="container"><table cellspacing="0">
      <colgroup>
        <col width="40" />
        <col width="220" />
        <col width="120" />
        <col width="65" />
        <col width="40" />
      </colgroup>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th style="width: 100%;></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td style="width: 100%;></td>
        </tr>
      </tbody>
    </table></div>

css Code:
Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }

  

  


 div.container


 {


   height: 400px;


   width: 800px;


   overflow: scroll;


 }


 table


 {


   width: 100%;


 }


 td


 {


   border-style: solid;


   border-color: silver;


   border-width: 0px;


   padding: 1px 3px;


 }


 th


 {


   border-style: outset;


   border-color: silver;


   border-width: 2px;


   background: silver;


   padding: 1px 3px;


 } 

It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells...

Please help me

Hi all,

I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise.

This is an abridged version of the site's code for example:
Code:

<style type="text/css">
<!--
#main1 {
	padding: 0px;
	margin: 0px;
}

#left {
	width:260px;
	margin:0;
	padding:0;
	float: left;
}
#left-top {
	background-image: url(../images/panel-top-left.gif);
	background-repeat: no-repeat;
	background-position: center top;
	height: 16px;
	margin: 0px;
	padding: 0px;
}
#left-middle {
	background-image: url(../images/panel-middle-left.gif);
	background-repeat: repeat-y;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 2px;
}
#left-bottom {
	background-image: url(../images/panel-bottom-left.gif);
	background-position: center;
	height: 18px;
}
#logo {
	background-image: url(../images/swalingslogo.gif);
	background-position: center top;
	width: 260px;
	height: 120px;
	background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
	padding-left: 0;
	margin-bottom:10px;
	width: 217px;
}
#navlist li
{
	list-style: none;
	margin-bottom:4px;
	padding: 0;
	font-size:1.2em;
	line-height:1.8em;
	width:217px;
	height:32px;
	background-image:url(../images/nav2.gif);
	background-repeat:no-repeat;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
	display:block;
	text-decoration: none;
	color:#039;
	width:207px;
	height:32px;
	font-weight:bold;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#navlist li a:hover { 
	text-decoration: none;
	color:#FF6600;
}
/* Testimonials */
div#fscroller {
	width:200px;
	height:200px;
	background-image:url(../images/bg-testimonials.gif);
	background-repeat:no-repeat;
	margin-left:8px;
}
div#fscroller p {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

/* Middle Column */
#middle {
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	text-align: justify;
	margin-left: 260px;
}
#middle #top-left {
	background-image: url(../images/panel-top-rightleft.gif);
	height: 16px;
	font-size: 2px;
	background-repeat: no-repeat;
}
#middle #top-right {
	float: right;
	margin-top: -16px;
	background-image: url(../images/panel-top-rightright.gif); 
	height: 16px; 
	width: 20px;
	font-size: 2px;
}
#middle a {
	color: #003399;
}
#middle a:hover {
	text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
	background-image: url(../images/title-unitedkingdom.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 201px;
	margin-bottom: 6px;
}
#middle h2#antigua {
	background-image: url(../images/title-antigua.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 128px;
	margin-top: 16px;
	margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
	float: left;
}
div.minisite span {
	display: none;
}
div.minisite a {
	background-position: top;
	background-repeat: no-repeat;
	height: 168px;
	width: 190px;
	display: block;
}
div.minisite a:hover {
	background-position: bottom;
}
a#minisite-swimminglessons {
	background-image: url(../images/swimming-lessons-uk.jpg);
}

.clear {
	clear:both;
}
.hidden {
	display: none;
}

.notopgap {
	margin-top: 0;
}

.nobottomgap {
	margin-bottom: 0;
}
.inside {
	background: #EFEFEF;
	padding-left: 10px;
	padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
		
<div id="left-top"></div>
<div id="left-middle">

<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->

<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
	
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
	
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
	
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>

<div class="clear"></div>

<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
			
<div class="clear"></div>
			
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
	
</div>	
<!-- End Middle Column -->
	
</div>

I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links.

This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this.

I can't add in links properly, so I hope this is acceptable under the rules --
The site in question is: www.swalings .com/swalings/index4.asp
and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg

Hopefully that's enough information to go on, please let me know if there's something I missed out.

Thanks a lot!

Rob

I am using the following code how do I change it so that it would show up in the center of the brower window?

Thanks
Tim
PHP Code:
<div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\">
<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" 

codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0

,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\">
<param name=\"allowScriptAccess\" value=\"sameDomain\" />
<param name=\"movie\" value=\"ads/cardio3.swf\" />
<param name=\"loop\" value=\"false\" />
<param name=\"quality\" value=\"high\" />
<param name=\"wmode\" value=\"transparent\" />
<param name=\"bgcolor\" value=\"#ffffff\" />
<embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" 

bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" 

allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" 

pluginspage=\"http://www.macromedia.com/go/getflashplayer\" />
</object>
</div> 

Question title:
A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically

Hello

I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google.

If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome.

I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample)

f.e
line 1 : value_one - ( some_text - value_two (right justified) )
line 2 : value_one - ( some_text - value_two (right justified) )
line 99:....
e.t.c

Column one has a fixed width of 32px.
'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically.

Finally I need the color behind column one be different then the column 2 and 3.

So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily.
But my problem is that when I scroll horizontally that my first column scrolls away to the left.

Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically?