Advertisement

11.28.2007 at 07:52PM PST, ID: 22989633
[x]
Attachment Details

CSS - 3 column div layout 2 fixed widths one fluid

Asked by Griffin80 in Extensible HTML (XHTML), Miscellaneous Web Development, Cascading Style Sheets (CSS)

Tags: 3, div, column, css, layout

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%Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:

<!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>
 
Keywords: CSS - 3 column div layout 2 fixed wi…
Title
1 Center a div using CSS?
2 CSS Positioning - tall div causing layo…
3 CSS Layout problem
4 Css Centering div
5 problem with my div layout
6 2 div's Layout questions
 
Loading Advertisement...
 
[+][-]11.28.2007 at 08:19PM PST, ID: 20371326

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]11.29.2007 at 01:24PM PST, ID: 20377457

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]12.18.2007 at 02:54AM PST, ID: 20491103

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Extensible HTML (XHTML), Miscellaneous Web Development, Cascading Style Sheets (CSS)
Tags: 3, div, column, css, layout
Sign Up Now!
Solution Provided By: anandhariharan
Participating Experts: 3
Solution Grade: A
 
 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628