Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

fixed width plus fluid columns

Posted on 2004-09-07
9
Medium Priority
?
434 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 600 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

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 is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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…
Suggested Courses

972 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