I was just playing around and came up with a simple template for a 3 column, header, footer layout that uses all absolute positioning. I works in NS7 and IE 5 for the MAC, but haven't gotten a chance to test it out on other browsers.
The complete code is listed below. Lemme know what you think.
##########
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>XHTML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body {margin: 0px; padding: 0px;}
#toprow {
position: relative;
top: 0px;
left: 0px;
background-color: blue;
}
#left {
position: relative;
width: 40%;
background-color: #fc9;
z-index:1;
}
#middle {
position: absolute;
left: 100%;
top: 0px;
width: 100%;
background-color: #c00;
z-index: 1;
}
#right {
position:absolute;
left: 100%;
top: 0px;
width: 50%;
background-color: #c0c;
z-index: 1;
}
#bottomrow {
position: absolute;
left: 0px;
width:100%;
background-color: #0c0;
z-index: 1;
}
-->
</style>
</head>
<body>
<div id="toprow"> </div>
<div id="left">
<div id="middle">
<div id="right"> </div>
</div>
</div>
<div id="bottomrow"> </div>
</body>
</html>In IE 6.0, only a top lime green bar was showing, but in the source code that was supposed to be at the bottom. All of the other divs were hidden of the screen because you had position:absolute;left:100%;.Originally posted by toicontien
I was just playing around and came up with a simple template for a 3 column, header, footer layout that uses all absolute positioning. I works in NS7 and IE 5 for the MAC, but haven't gotten a chance to test it out on other browsers.
I found it quite interesting that you said this works on NS 7, since your design is fundamentally flawed. Absolute positioning things remove them from the flow of the page and thus they don't make their parent's height become taller.
Just try this variation of your code to see how it falls apart (ie the second line is not visable in the middle div) in Mozilla 1.1 & latest nightly (I presume NS 7 won't work either, if it does it's due to bugs).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>XHTML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {margin: 0px; padding: 0px;}
#toprow {
position: relative;
top: 0px;
left: 0px;
background-color: blue;
}
#left {
position: relative;
width: 40%;
background-color: #fc9;
z-index:1;
}
#middle {
position: absolute;
left: 100%;
top: 0px;
width: 100%;
background-color: #c00;
z-index: 1;
}
#right {
position:absolute;
left: 100%;
top: 0px;
width: 50%;
background-color: #c0c;
z-index: 1;
}
#bottomrow {
position: absolute;
left: 0px;
width:100%;
background-color: #0c0;
z-index: 1;
}
</style>
</head>
<body>
<div id="toprow">a</div>
<div id="left">b
<div id="middle">c<br />look what happens if you add a new row
<div id="right">d</div>
</div>
</div>
<div id="bottomrow">e</div>
</body>
</html>I was able to recreate what you described above with the code that I copied off this page. However, I inserted some text inside all the DIVs, and I can verify that the design works on NS 7.01, Opera 6.04, Mozilla 1.0, and IE 6.0 on Windows XP.
I noticed that most browsers don't display DIVs in some cases if there aren't any HTML entities, text, or images inside. I'll attach the revised file to see if it holds up.
The reason it worked on my computer at work was because I had a character space entity inside the DIVs, which translated to an actual space when I posted the code on this site (oops :-0).
I'll make some screen shots of the browsers that I tested this on too.Screen shot of IE 6.0.
This is my theory so far. Positioning things absolutely takes it out of the NORMAL document flow. I set all the absolutely positioned DIVs to the same z-index, which created a "new" document flow above the normal one.
More screen shots to follow.Mozilla 1.0Netscape 7.01Opera 6.04Originally posted by toicontien
I was able to recreate what you described above with the code that I copied off this page.
I assume that was a reply to Zach and not me since all those images still only show 1 line of text, which will hide the fundamental design flaw.I know what you mean now Stefan.
I'm still not sure why browser developers include absolute and relative positioning. It's almost completely useless. Relative positioning keeps the element in the document flow, but also takes up space inside it's parent element, even if it is not displayed in the parent element. It's like there's almost two relative positioned elements in that case.
Setting the z-index to be the same for all absolutely positioned elements doesn't make them recognize each other's heights and widths. When are browser developers going to give us something we can use?!
Back to floating DIVs.
Thanks for the help.Originally posted by toicontien
I'm still not sure why browser developers include absolute and relative positioning. It's almost completely useless.
I find them quite usfull actually, but not for what you are trying to do. In your case the simple CSS 1 float will be the best option.
Relative positioning keeps the element in the document flow, but also takes up space inside it's parent element, even if it is not displayed in the parent element. It's like there's almost two relative positioned elements in that case.
Yepp, that is exactly how it's designed to behave.
Relative keeps the content size in the flow of the page while absolute removes it from the flow.
Setting the z-index to be the same for all absolutely positioned elements doesn't make them recognize each other's heights and widths.
Becuse they are NOT at the same level. z-index values are relative values, not absolute value.
When are browser developers going to give us something we can use?!
Well, it's already here. But you must read the specs so you will know what you are really doing instead of just trying as you go along.
Once you know the rules it's much easier to design something that works for real (not counting browserbugs of cource
).
This link is a good thing to keep handly
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/You">http://www.w3.org/TR/REC-CSS2/You</a><!-- m --> may want to look up "tutorials" at
<!-- m --><a class="postlink" href="http://www.glish.com/css/">http://www.glish.com/css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.htmlhttp://banners.dollarmachine.com/pic/2014000/hal001.gif">http://www.thenoodleincident.com/tutori ... hal001.gif</a><!-- m --> (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)
The complete code is listed below. Lemme know what you think.
##########
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>XHTML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body {margin: 0px; padding: 0px;}
#toprow {
position: relative;
top: 0px;
left: 0px;
background-color: blue;
}
#left {
position: relative;
width: 40%;
background-color: #fc9;
z-index:1;
}
#middle {
position: absolute;
left: 100%;
top: 0px;
width: 100%;
background-color: #c00;
z-index: 1;
}
#right {
position:absolute;
left: 100%;
top: 0px;
width: 50%;
background-color: #c0c;
z-index: 1;
}
#bottomrow {
position: absolute;
left: 0px;
width:100%;
background-color: #0c0;
z-index: 1;
}
-->
</style>
</head>
<body>
<div id="toprow"> </div>
<div id="left">
<div id="middle">
<div id="right"> </div>
</div>
</div>
<div id="bottomrow"> </div>
</body>
</html>In IE 6.0, only a top lime green bar was showing, but in the source code that was supposed to be at the bottom. All of the other divs were hidden of the screen because you had position:absolute;left:100%;.Originally posted by toicontien
I was just playing around and came up with a simple template for a 3 column, header, footer layout that uses all absolute positioning. I works in NS7 and IE 5 for the MAC, but haven't gotten a chance to test it out on other browsers.
I found it quite interesting that you said this works on NS 7, since your design is fundamentally flawed. Absolute positioning things remove them from the flow of the page and thus they don't make their parent's height become taller.
Just try this variation of your code to see how it falls apart (ie the second line is not visable in the middle div) in Mozilla 1.1 & latest nightly (I presume NS 7 won't work either, if it does it's due to bugs).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>XHTML Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {margin: 0px; padding: 0px;}
#toprow {
position: relative;
top: 0px;
left: 0px;
background-color: blue;
}
#left {
position: relative;
width: 40%;
background-color: #fc9;
z-index:1;
}
#middle {
position: absolute;
left: 100%;
top: 0px;
width: 100%;
background-color: #c00;
z-index: 1;
}
#right {
position:absolute;
left: 100%;
top: 0px;
width: 50%;
background-color: #c0c;
z-index: 1;
}
#bottomrow {
position: absolute;
left: 0px;
width:100%;
background-color: #0c0;
z-index: 1;
}
</style>
</head>
<body>
<div id="toprow">a</div>
<div id="left">b
<div id="middle">c<br />look what happens if you add a new row
<div id="right">d</div>
</div>
</div>
<div id="bottomrow">e</div>
</body>
</html>I was able to recreate what you described above with the code that I copied off this page. However, I inserted some text inside all the DIVs, and I can verify that the design works on NS 7.01, Opera 6.04, Mozilla 1.0, and IE 6.0 on Windows XP.
I noticed that most browsers don't display DIVs in some cases if there aren't any HTML entities, text, or images inside. I'll attach the revised file to see if it holds up.
The reason it worked on my computer at work was because I had a character space entity inside the DIVs, which translated to an actual space when I posted the code on this site (oops :-0).
I'll make some screen shots of the browsers that I tested this on too.Screen shot of IE 6.0.
This is my theory so far. Positioning things absolutely takes it out of the NORMAL document flow. I set all the absolutely positioned DIVs to the same z-index, which created a "new" document flow above the normal one.
More screen shots to follow.Mozilla 1.0Netscape 7.01Opera 6.04Originally posted by toicontien
I was able to recreate what you described above with the code that I copied off this page.
I assume that was a reply to Zach and not me since all those images still only show 1 line of text, which will hide the fundamental design flaw.I know what you mean now Stefan.
I'm still not sure why browser developers include absolute and relative positioning. It's almost completely useless. Relative positioning keeps the element in the document flow, but also takes up space inside it's parent element, even if it is not displayed in the parent element. It's like there's almost two relative positioned elements in that case.
Setting the z-index to be the same for all absolutely positioned elements doesn't make them recognize each other's heights and widths. When are browser developers going to give us something we can use?!
Back to floating DIVs.
Thanks for the help.Originally posted by toicontien
I'm still not sure why browser developers include absolute and relative positioning. It's almost completely useless.
I find them quite usfull actually, but not for what you are trying to do. In your case the simple CSS 1 float will be the best option.
Relative positioning keeps the element in the document flow, but also takes up space inside it's parent element, even if it is not displayed in the parent element. It's like there's almost two relative positioned elements in that case.
Yepp, that is exactly how it's designed to behave.
Relative keeps the content size in the flow of the page while absolute removes it from the flow.
Setting the z-index to be the same for all absolutely positioned elements doesn't make them recognize each other's heights and widths.
Becuse they are NOT at the same level. z-index values are relative values, not absolute value.
When are browser developers going to give us something we can use?!
Well, it's already here. But you must read the specs so you will know what you are really doing instead of just trying as you go along.
Once you know the rules it's much easier to design something that works for real (not counting browserbugs of cource
).This link is a good thing to keep handly
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/You">http://www.w3.org/TR/REC-CSS2/You</a><!-- m --> may want to look up "tutorials" at
<!-- m --><a class="postlink" href="http://www.glish.com/css/">http://www.glish.com/css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.htmlhttp://banners.dollarmachine.com/pic/2014000/hal001.gif">http://www.thenoodleincident.com/tutori ... hal001.gif</a><!-- m --> (<!-- m --><a class="postlink" href="http://www.kinkyceleb.com/1261795520">http://www.kinkyceleb.com/1261795520</a><!-- m -->)