Solved

How to make a CSS three column layout with static middle column?

Posted on 2008-11-02
12
1,378 Views
Last Modified: 2013-11-19
I'd like to have a three column layout in CSS such that the center column is a set width, say 900px, while the left column and the right column expand to fill up the area that the middle column does not.  I'd like to use only DIVs.  I would also like to make the heights of the flanking columns match that the height of the middle column (which is where the content will reside).  

Is this possible to do with CSS only?  
0
Comment
Question by:ariestav
  • 4
  • 4
  • 3
  • +1
12 Comments
 
LVL 6

Expert Comment

by:lpxtech
ID: 22864488
This is possible, you have to set your width property in css to a set value for the center color for example width: 500px; and a percentage for the other two columns ex. width: 20%;

I have attached some example code.
<style type="text/css">
div {
	float: left;
	border:solid #000 1px;
}
 
#col-1, #col-3 {
	width: 20%;
}
 
#col-2 {
	width: 500px;
}
</style>
</head>
<body>
<div id="col-1">
This is col 1
</div>
<div id="col-2">
This is col 2
</div>
<div id="col-3">
This is col 3
</div>
</body>
</html>

Open in new window

0
 
LVL 4

Author Comment

by:ariestav
ID: 22864830
Thank you for the code, but how can I ensure that the middle column is always aligned in the center?

Also, I wanted the flanking columns to get as thin as 1px. when the browser gets thinner.

Is that possible?
0
 
LVL 4

Author Comment

by:ariestav
ID: 22864928
Attached is a diagram showing how I'd like the fluid cols to work against the static, center column.  Is this possible with CSS DIVs?

Thanks!

browserWidths.jpg
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 6

Expert Comment

by:lpxtech
ID: 22864941
By using float: left on all tree columns, they will be aligned in the order that they are in the html. Also you may want to add <div class="clear">&nbsp;</div> style to the element directly following the third column. This will prevent the columns from displaying over any content below the columns.
CSS:
 
.clear {
  clear: both;
}

Open in new window

0
 
LVL 6

Expert Comment

by:lpxtech
ID: 22864946
Also, if you would like it all to fill the browser you can have width: 60% on the center col and 20% on each side. If you do it that way you can set a minimum width on the center column by using the code below.
#col-2 {
  width: 60%;
  min-width: 500px; //Firefox minimum width
  _width: 500%; // IE minimum width
}

Open in new window

0
 
LVL 6

Expert Comment

by:uzzidesign
ID: 22868256
The following galleries provide many different 3 column CSS layouts with their source.
http://blog.html.it/layoutgala/
http://mitchbryson.com/free-css-templates
0
 
LVL 4

Author Comment

by:ariestav
ID: 22921095
@uzzidesign:  I checked out the url you sent, and I didn't see any examples that showed the design spec I uploaded earlier.

@Ipxtech:  I tried your solution, but it didn't work in a couple of browsers I was targeting.

I decided to go with a simple three column table layout and place the div elements within those columns.  I know it's a hack, but in order to get it to work the way I wanted across all browsers, I had to do it like this.

Thanks again for your time and help!
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 23079675
I didn't see your post earlier, but have attached some code that I think does what you want.  
<!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>
<title>3 Column | Left/Right Fluid - Center Fixed</title>
 
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height:100%;
}
 
#centercol {
width: 600px;
height: 100%;
margin: 0 auto;
background: white;
 
}
#lefthalf {
position: absolute;
left: 0;
top: 0;
width: 50%;
height:100%;
}
#righthalf {
position: absolute;
right: 0;
top: 0;
width: 50%;
height:100%;
}
#leftcol {
margin-right: 300px;
background: blue;
height: 100%;
 
}
#rightcol {
margin-left: 300px;
background: red;
height: 100%;
}
 
</style>
 
</head>
<body>
<div id="lefthalf">
    <div id="leftcol">left column</div>
</div>
 
<div id="centercol">center column</div>
 
<div id="righthalf">
    <div id="rightcol">right column</div>
</div>
 
</body>
</html>

Open in new window

0
 
LVL 14

Accepted Solution

by:
yessirnosir earned 500 total points
ID: 23083244
came across another 3 column/fixed middle layout, even better than the one I posted above:
http://www.gunlaug.no/tos/moa_27a.html
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 23083248
late to the party, but I have just posted two different layouts that I think answer the question...
0
 
LVL 4

Author Closing Comment

by:ariestav
ID: 31512577
I used "partially accurate" because I have not tested it in many browsers on both Mac and PC
0
 
LVL 14

Expert Comment

by:yessirnosir
ID: 23087028
thanks... fyi have been working this layout for another EE question, and as a result of some feedback on that other post, I've been fine tuning the first code I posted above.  Latest version has been modified to handle narrow browser windows better, including a fix to stop the layout from breaking in IE6 when browser window is squeezed too much... this relies on a CSS expression to simulate the "min width" property.  Expressions aren't the preferred way of doing anything (!) but the expression only kicks in for IE users, so it's not a bad compromise to deal with that browser's shortcomings.  Anyway, am posting latest updated code, for what it's worth...
<!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>
<title>3 Column Left/Right Fluid - Center Fixed With min width expression to fix IE6 compatibility</title>
 
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height:100%;
}
#container {
position:relative;
width:100%;
min-width:1050px;
height:100%;
} 
#centercol {
position:relative;
width: 950px;
height: 100%;
margin: 0 auto;
background: white;
}
 
#lefthalf {
position: absolute;
left: 0;
top: 0;
width: 50%;
height:100%;
}
 
#righthalf {
position: absolute;
right: 0;
top: 0;
width: 50%;
height:100%;
}
 
#leftcol {
margin-right: 475px;
background: blue;
height: 100%;
}
 
#rightcol {
margin-left: 475px;
background: red;
height: 100%;
}
/* following code for IE min width based on example at www.gunlaug.no/contents/wd_additions_14.html  */
* html div#container {width: 1050px /* fallback value */;
width:expression(((document.compatMode && 
document.compatMode=='CSS1Compat') ? 
document.documentElement.clientWidth : 
document.body.clientWidth) < 1051 ? "1050px" : "100%"); }
 
</style>
 
</head>
<body>
<div id="container">
 
<div id="lefthalf">
    <div id="leftcol">left column</div>
</div>
 
<div id="centercol">center column
 
</div>
 
<div id="righthalf">
    <div id="rightcol">right column</div>
</div>
</div> 
</body>
</html>

Open in new window

0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Customizing jQuery UI Accordion CSS 3 28
Troubles viewing HTML in Outlook 2010 client 3 31
Media Queries  not Firing 6 19
Button on Table, name table1 not working 4 22
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question