Solved

fixed width plus fluid columns

Posted on 2004-09-07
9
431 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

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…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…
Suggested Courses

635 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