fixed width plus fluid columns
I need to have one fixed width column and two "fluid" columns in the same page. Can someone help me out?
seanpowell
I assume the fixed column is in the middle of the 2 fluid columns?
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)
{
windowWidth = window.innerWidth;
}
else
{
if (document.documentElement && document.documentElement.c
{
windowWidth = document.documentElement.c
}
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('l
var leftWidth = leftElement.offsetWidth;
var centerElement = document.getElementById('c
// 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('r
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
<!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)
{
windowWidth = window.innerWidth;
}
else
{
if (document.documentElement && document.documentElement.c
{
windowWidth = document.documentElement.c
}
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('l
var leftWidth = leftElement.offsetWidth;
var centerElement = document.getElementById('c
// 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('r
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
ASKER
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
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
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?
Maybe we should look at this differently?
ASKER
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
Thanks,
Bob
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...
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...
ASKER
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
Thanks Sean
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.