Solved

fixed width plus fluid columns

Posted on 2004-09-07
9
428 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
ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

 
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

832 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