Solved

fixed width plus fluid columns

Posted on 2004-09-07
9
429 Views
Last Modified: 2008-03-04
I need to have one fixed width column and two "fluid" columns in the same page.  Can someone help me out?
0
Comment
Question by:weikelbob
  • 5
  • 3
9 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 12008335
I assume the fixed column is in the middle of the 2 fluid columns?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12008544
If so, then this should do it:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
<!--

// Let's get the width of the available window for all browsers

function getWindowWidth()
{
      var windowWidth = 0;
      if (typeof(window.innerWidth) == 'number')
      {
            windowWidth = window.innerWidth;
      }
      else
      {
            if (document.documentElement && document.documentElement.clientWidth)
            {
                  windowWidth = document.documentElement.clientWidth;
            }
            else
            {
                  if (document.body && document.body.clientWidth)
                  {
                        windowWidth = document.body.clientWidth;
                  }
            }
      }
      return windowWidth;
}

function setMain()
{
      if (document.getElementById)
      {
            var windowWidth = getWindowWidth();
            if (windowWidth > 0)
            {

                  var leftElement = document.getElementById('left');
                  var leftWidth  = leftElement.offsetWidth;

                  var centerElement = document.getElementById('center');
                  // 48 is the total of the padding and borders on the left and right div's...
                  var centerWidth  = centerElement.offsetWidth +44;

                  var rightElement = document.getElementById('right');
                  var rightWidth  = rightElement.offsetWidth;

                  leftElement.style.width = (windowWidth - (centerWidth)) /2 + 'px';
                  rightElement.style.width = (windowWidth - (centerWidth)) /2 + 'px';

            }
      }
}

window.onload = function()
{
      setMain();
}

window.onresize = function()
{
      setMain();
}

//-->
</script>

<style type="text/css">

body
{
      margin: 0;
      padding: 0;
      font-family: georgia, times, serif;
      color: #333;
      background-color: #ffffff;
}

#left
{
      float:left;
      background-color:#cccccc;
      border: 1px solid #666666;
      padding:10px;
}

#center
{
      float:left;
      width:400px;
      border: 1px solid #666666;
      padding:10px;
}

#right
{
      float:left;
      background-color:#cccccc;
      border: 1px solid #666666;
      padding:10px;
}

</style>
</head>
<body>

<div id="left">LEFT</div>

<div id="center">CENTER</div>

<div id="right">RIGHT</div>

</body>
</html>


Thanks,
Sean
0
 
LVL 7

Author Comment

by:weikelbob
ID: 12009653
Sean,

Could you give me the same thing, except for one fixed column that is to the left of the other two?

And also the code for both a left and rigth fixed width columns, with two more "fluid" columns in the center?

Hope I'm not asking too much.

Bob
0
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
LVL 31

Expert Comment

by:seanpowell
ID: 12009878
Hmm - hard to say, I feel a bit like I'm just providing your work for you, instead of helping you learn...
Maybe we should look at this differently?
0
 
LVL 7

Author Comment

by:weikelbob
ID: 12010683
Sean, I apologize.  I used to do javascript, so I'm going to see if I can figure it out. If I have trouble with part of the code after that, i'll stop in and ask you guys about it.

Thanks,

Bob
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12010791
If you used to do javascript, you're already ahead of me - I'm still learning.

I'm happy to work through this with you, I just don't want you to get stuck whenever a condition changes, so I'm worried that I'm not really helping...
0
 
LVL 7

Author Comment

by:weikelbob
ID: 12010954
I agree, It will be easier in the long run if I know the code I'm using, especially Javascript which I already kind of know.

Thanks Sean
0
 
LVL 5

Expert Comment

by:pmsyyz
ID: 12025761
It would be a mistake to use JavaScript to do this.  All that is needed is CSS.

3 columns, the holy grail
http://glish.com/css/7.asp

4 columns, all fluid
http://glish.com/css/8.asp

You can set a fixed width on any column you wish.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 150 total points
ID: 12026268
Yes, and no... :-)

The "holy grail" layout, as they call it, works well in certain cases and not so well in others. For a single fixed width column, the code would be quite different - and I'm not a big fan of absolute positioning unless there's no other way. Bob's second requirement:

>>also the code for both a left and rigth fixed width columns, with two more "fluid" columns in the center?

can be adapted from that layout, simply by nesting two floated columns within the center content, something along the lines of:

#centercontent
{
      margin-left:200px;
      margin-right:200px;
      background:#fff;
}

#center1
{
      float:left;
      width:50%;
      background:#cccccc;
}

#center2
{
      float:right;
      width:50%;
      background:#999999;
}

and

<div id="centercontent">
      <div id="center1">Column 2</div>
      <div id="center2">Column 3</div>
</div>

but, we would need to be very careful about borders, margins and padding.

As to the 4-column layout, it is meant "only" for specifying %, not fixed-width. From their page:
Drawback #1) it gets difficult quickly if you want to make any of the columns a fixed width.
Drawback #2) it relies heavily on percentages, which the various browsers all calculate differently, so you can't place your columns very precisely.

Javascript, on the other hand, (in my experience) helps make 99% of all so-called "pre-made CSS layouts", that much more useful and workable. It is an important, necessary and worthwhile component to any modern page layout...

Sean
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

821 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