Solved

CSS - 3 column div layout 2 fixed widths one fluid

Posted on 2007-11-28
5
7,243 Views
Last Modified: 2013-11-19
I having trouble with my CSS.

WHat im trying to do is create a 3 column div layout where the center div uses a width of 100%

The problem im having is that the 3rd column gets pushed to the next line when using a width of 100%
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>Untitled XHTML Document</title>
<style>
body,html {
   height: 100%;
   padding: 0;
   margin: 0;
   border: 0;
   }
#frame {
   background-color: #000000;
   width: 100%;
   height: 100%;
   }
#col1 {
   background-color: #ff0000;
   width: 200px;
   height: 100%;
   float: left;
   }
#col2 {
   background-color: #0000ff;
   width: 100%;
   height: 100%;
   float: left;
   }
#col3 {
   background-color: #c0c0c0;
   width: 200px;
   height: 100%;
   float: left;
   }
</style>
</head>
<body>
<div id="frame">
 <div id="col1">test</div>
 <div id="col2">test1</div>
 <div id="col3">test2</div>
 <br clear="all" />
</div>
 
</body>
</html>

Open in new window

0
Comment
Question by:Griffin80
5 Comments
 
LVL 19

Expert Comment

by:darron_chapman
ID: 20371326
You need to use wrappers to gain the effect you are trying to achieve.  Perhaps this site can help: http://www.manisheriar.com/holygrail/index.htm.
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 20377457
Maybe this is what you want
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>Untitled XHTML Document</title>
<style>
body,html {
   height: 100%;
   padding: 0;
   margin: 0;
   border: 0;
   }
#col1 {
   background-color: #ff0000;
   width: 200px;
   height: 100%;
   position: absolute;
}
#col2 {
   background-color: #0000ff;
   position: absolute;
   height: 100%;
   left: 200px;
   right: 200px;
   }
#col3 {
   background-color: #c0c0c0;
   width: 200px;
   height: 100%;
   position:absolute;
   right: 0px;
   }
</style>
</head>
<body>
 <div id="col1">test</div>
 <div id="col2">test1</div>
 <div id="col3">test2</div>
</body>
</html>

Open in new window

0
 
LVL 3

Accepted Solution

by:
anandhariharan earned 500 total points
ID: 20491103
Here you go! Hope this solves your problem
<html>
<head>
<style type="text/css">
body{ margin:0px; }
.col1{ width:200px; height:500px; background-color:blue; color:#FFF; float:left; }
.col2{ width:100%; height:500px; background-color:green; color:#FFF; }
.col3{ width:200px; height:500px; background-color:red; color:#FFF; float:right; position:absolute; right:0px; }
</style>
</head>
<body>
<div class="col3">This is a test col 3</div>
<div class="col2">
  <div class="col1">This is a test col 1</div>
  This is a test col 2
</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:Griffin80
ID: 31411581
Thanks mate
0
 
LVL 3

Expert Comment

by:anandhariharan
ID: 20625382
anytime
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

803 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