I know that it is possible to center a div using margin:0px auto; and i know that this does not work in IE so I use a work-around - text-align:center;
but...
How is it possible to have 3 divs vertically aligned, side-by-side, in the center of the screen? i.e. left sidebar, content, right sidebar.<!-- m --><a class="postlink" href="http://glish.com/css/7.asp">http://glish.com/css/7.asp</a><!-- m --> is one way...Another way is to enclose them in another div and pass text-align: center to IE, and appropriate text-align to Moz/Opera.Try this
<SCRIPT language="JavaScript">
<!--
function pre_check(){
var content_width = parseInt(document.getElementById("content").style.width)
var posX = (document.body.clientWidth - content_width) / 2
document.getElementById("content").style.pixelLeft=posX
lefty=parseInt(document.getElementById("left_sidebar").style.width)
document.getElementById("left_sidebar").style.pixelLeft=posX - lefty
document.getElementById("right_sidebar").style.pixelLeft=posX+content_width
}
// include onload="pre_check()" in the opening body tag
// -->
</SCRIPT>
<div id="left_sidebar" style="position:absolute; width:100;height:200;top:50;border:1 solid green"></div>
<div id="content" style="position:absolute; width:100;height:200;top:50;border:1 solid red"></div>
<div id="right_sidebar" style="position:absolute; width:100;height:200;top:50;border:1 solid blue"></div>Pyro - I couldn't get your hyperlink to work.
nkaisare - I tried that idea but it didn't seem to work.
Mr J - This javaScript works but the page needs to be refreshed to view the content in the center of the screen if it is resized.
Thanks a lot for all your help though!
Here is a script that I devised as a solution. However, like Mr J's javaScript solution, if a user's screen is too small, the user will not be able to access the left sidebar. I think those W3C people should make an easier solution to this centering problem in their next CSS edition.
<html>
<title>Testing</title>
<head>
<style type="text/css">
body {
margin-left: 50%;
}
.content {
position:absolute;
margin-left: -200px;
width: 400px;
height: 100px;
border: 1px solid #000000;
}
.leftSidebar {
position:absolute;
margin-left: -350px;
width: 150px;
height: 100px;
border: 1px solid #000000;
}
.rightSidebar {
position:absolute;
margin-left: 200px;
width: 150px;
height: 100px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div class="leftSidebar">Left Sidebar</div>
<div class="content">Content</div>
<div class="rightSidebar">Right Sidebar</div>
</body>
</html>Originally posted by Tim158
Here is a script that I devised as a solution. However, like Mr J's javaScript solution, if a user's screen is too small, the user will not be able to access the left sidebar.
Could you define "too small?" I checked it against 800X600 and it looked fine. Yes, I know there are smaller resolutions, but if something looks good at 800X600, then I call it good.adding onresize=pre_check to the script should do it
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY onload="pre_check()">
<SCRIPT language="JavaScript">
<!--
function pre_check(){
var content_width = parseInt(document.getElementById("content").style.width)
var posX = (document.body.clientWidth - content_width) / 2
document.getElementById("content").style.pixelLeft=posX
lefty=parseInt(document.getElementById("left_sidebar").style.width)
document.getElementById("left_sidebar").style.pixelLeft=posX - lefty
document.getElementById("right_sidebar").style.pixelLeft=posX+content_width
onresize=pre_check
}
// include onload="pre_check()" in the opening body tag
// -->
</SCRIPT>
<div id="left_sidebar" style="position:absolute; width:100;height:200;top:50;border:1 solid green"></div>
<div id="content" style="position:absolute; width:100;height:200;top:50;border:1 solid red"></div>
<div id="right_sidebar" style="position:absolute; width:100;height:200;top:50;border:1 solid blue"></div>
</BODY>
</HTML>
but...
How is it possible to have 3 divs vertically aligned, side-by-side, in the center of the screen? i.e. left sidebar, content, right sidebar.<!-- m --><a class="postlink" href="http://glish.com/css/7.asp">http://glish.com/css/7.asp</a><!-- m --> is one way...Another way is to enclose them in another div and pass text-align: center to IE, and appropriate text-align to Moz/Opera.Try this
<SCRIPT language="JavaScript">
<!--
function pre_check(){
var content_width = parseInt(document.getElementById("content").style.width)
var posX = (document.body.clientWidth - content_width) / 2
document.getElementById("content").style.pixelLeft=posX
lefty=parseInt(document.getElementById("left_sidebar").style.width)
document.getElementById("left_sidebar").style.pixelLeft=posX - lefty
document.getElementById("right_sidebar").style.pixelLeft=posX+content_width
}
// include onload="pre_check()" in the opening body tag
// -->
</SCRIPT>
<div id="left_sidebar" style="position:absolute; width:100;height:200;top:50;border:1 solid green"></div>
<div id="content" style="position:absolute; width:100;height:200;top:50;border:1 solid red"></div>
<div id="right_sidebar" style="position:absolute; width:100;height:200;top:50;border:1 solid blue"></div>Pyro - I couldn't get your hyperlink to work.
nkaisare - I tried that idea but it didn't seem to work.
Mr J - This javaScript works but the page needs to be refreshed to view the content in the center of the screen if it is resized.
Thanks a lot for all your help though!
Here is a script that I devised as a solution. However, like Mr J's javaScript solution, if a user's screen is too small, the user will not be able to access the left sidebar. I think those W3C people should make an easier solution to this centering problem in their next CSS edition.
<html>
<title>Testing</title>
<head>
<style type="text/css">
body {
margin-left: 50%;
}
.content {
position:absolute;
margin-left: -200px;
width: 400px;
height: 100px;
border: 1px solid #000000;
}
.leftSidebar {
position:absolute;
margin-left: -350px;
width: 150px;
height: 100px;
border: 1px solid #000000;
}
.rightSidebar {
position:absolute;
margin-left: 200px;
width: 150px;
height: 100px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div class="leftSidebar">Left Sidebar</div>
<div class="content">Content</div>
<div class="rightSidebar">Right Sidebar</div>
</body>
</html>Originally posted by Tim158
Here is a script that I devised as a solution. However, like Mr J's javaScript solution, if a user's screen is too small, the user will not be able to access the left sidebar.
Could you define "too small?" I checked it against 800X600 and it looked fine. Yes, I know there are smaller resolutions, but if something looks good at 800X600, then I call it good.adding onresize=pre_check to the script should do it
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY onload="pre_check()">
<SCRIPT language="JavaScript">
<!--
function pre_check(){
var content_width = parseInt(document.getElementById("content").style.width)
var posX = (document.body.clientWidth - content_width) / 2
document.getElementById("content").style.pixelLeft=posX
lefty=parseInt(document.getElementById("left_sidebar").style.width)
document.getElementById("left_sidebar").style.pixelLeft=posX - lefty
document.getElementById("right_sidebar").style.pixelLeft=posX+content_width
onresize=pre_check
}
// include onload="pre_check()" in the opening body tag
// -->
</SCRIPT>
<div id="left_sidebar" style="position:absolute; width:100;height:200;top:50;border:1 solid green"></div>
<div id="content" style="position:absolute; width:100;height:200;top:50;border:1 solid red"></div>
<div id="right_sidebar" style="position:absolute; width:100;height:200;top:50;border:1 solid blue"></div>
</BODY>
</HTML>