Solved

fixed width plus fluid columns

Posted on 2004-09-07
9
426 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

744 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now