I’ve used this techique, but finded some trubles on IE.
I’ve coded a webpage, that has only div’s , and it works like i want to on mozilla, opera and netscape but on internet explorer doesn’t show the background of the forms divs, should be white.
Copy & paste the code below to embed this comment.
Nicolas
I read this article and all I could find on the net about CSS, tables replacement by DIVs, and so on … To my minf this is too prematured to use such techniques with all browsers having problems with the standard. That’s why I don’t understand why you are all crazy about CSS. CSS is good for formatting, it’s not yet for layouts.
I tried all the techniques to build a 3 columns layout. Each time when reducing the window width, the 3rd column goes under the 2nd one. I can’t even imagine producing a site where my visitors would say : this is not serious.
So I will stay with tables until something serious comes up in browsers. This day, I will convert.
I have read this article and CSS Design: Taming lists. Great info and very informative, but now I’m looking beyond for a new solution. I have my list of links on the left hand side of the web page, common. I’m got some content in the center of the page, and I want to wrap the bottom across the bottom of the content. We’ve all seen it before, and I know it can be done with pretty pictures: a nice bar on the left that bends at the bottom and juts to the right. Now the question, how do I do his with CSS?
Well, I like Firebird for it is much lighter then mozilla/netscape but on the other hand it has the exactly same problems rendering my website. I don’t know if the problem is with IE/OPERA (for it displays correctly and the same in both) or with Firebird but since IE community is the largest and I personaly am using OPERA 7.11 I won’t switch until the rendering of CSS is improved.
I do have all of them installed for experiments and I try really hard to get standard, and I am (according to XHTML transitional validator), but MOzilla/Firebird always position my divs a bit lower then it is supposed.
Copy & paste the code below to embed this comment.
I read that the
position: absolute
doesn’t mean that the position (right: left: top: bottom:) is relative to the entire window, but it is relative to the innermost block containing the element! Is this right?
I thought the
position: absolute
made these distances (right: left: top: bottom:) relative to the entire document, an the
position: relative
made these distances relative to the innermost block element!
Was it wrong?
if so, the html (with CSS) below should work fine, but it doesn’t!
Copy & paste the code below to embed this comment.
anu
Hi,
I have a fixed layout of 760 width. I’m using CSS2 to place the buttons in the top nav whose link’s and text come thru server side. Now it requires a line to stretch in the end and only appear when there are less links on the top navigation. As it is dynamic, the line also needs to stretch acordingly hence i don’t want the width for the line to be defined. Just now my code has it. Below is the code for both the HTML and CSS. Browser supported are IE5.0 and above and Netscape 6.1 and above. Please help as soon we are entering to UAT and i still don’t have a fix for it.
Copy & paste the code below to embed this comment.
I do write some tosh. The small tail was, of course, the padding at the end of the buttons. I made the following work for me, you will need to modify the Hover to suit.
body {
margin:10px 10px 0 10px;
padding:0;
background:white;
}
Copy & paste the code below to embed this comment.
simon booth
Here is a slight modification of Justin’ script. I’m far from a Javascript/DOM expert, so here is my attempt to get it right.
The difference in this script is it looks for a div element with a class named ‘container’. Inside the container you have your children div elements. The script calculates and sets the height for the container div, then goes finds the children div elements of the container and sets their height as well.
In the body element put onload=‘balanceContainer()’ and thats it. It should work in IE 5.5+ and any Mozilla browser. Works in IE6/Mozilla 1.4, but haven’t tried it in Opera/Konqueror/Safari yet though.
=================
function parseContainer(div) {
var tLength=0;
var nLength=0;
var childNode;
var children=div.childNodes;
for (i = 0; i < children.length; i++) {
childNode=children.item(i);
nLength=childNode.offsetHeight;
if (nLength > tLength) { tLength=nLength; }
}
div.style.height = tLength + ‘px’;
/* Parse again -> Insert offsetHeight to all children */
for (i = 0; i < children.length; i++) {
setSubContainer(children,tLength);
}
}
function setSubContainer(subdiv,length) {
if (subdiv.tagName == ‘DIV’) {
subdiv.style.height=length + ‘px’;
}
}
Copy & paste the code below to embed this comment.
A. Novice With-A-Question
How about this… Setup three main divs called top, middle and bottom. The top div is absolute at the top of the page/screen, the middle is relative to the bottom of the top. The bottom is relative to the middle.
So the middle and bottom divs are relatively positioned vertically.
Within the middle div (container), create the column divs (1 to 4). The column divs are relatively positioned horizontally. If we assume that each column div is evenly spaced then they would be 25% of the width of the container div.
Is what I’ve described above impossible to do with divs, CSS, and without tables? Is is possible for a div to automatically expand in the way that table cells do. If divs can expand the way table cells do, then do relatively positioned divs, automatically readjust their based on other elements within a document… specifically other divs?
I’m hoping the answers are yes, yes, and yes. If not please explain.
Copy & paste the code below to embed this comment.
Idoia
hmm isn’t all this suposed to be geared towards accesibility? some areas of info on this page (i.e. samples/examples of code) are spread all over the place. Just thought i’d let you kno and ask if anyone knows why.
I just discoverd that the topic how to get a DIV to expand its container DIV or other element is discussed here aswell. I posted the similar on the Macromedia forum this friday . One partial solution is to float the child DIVs but then I had to REMOVE absoulte positioning on those DIVs. Can you belive that! Flexibel layout consepts are something I have to deliver. And pushing the child DIVs around with padding and borders is not good.
Copy & paste the code below to embed this comment.
kenny
>>An interactive page such as a web page is an application.
if this is the case why dont we have a browser that works like the adobe acrobat interface, removing navigation into a side bar.
If you could somehow declare to a user agent what is your navigation or even a site index, ‘footer’ information and all that other standard stuff it’s display could be removed from the ‘web’, ‘pda’, ‘mobile phone’ screen.
Why do we need to write an ‘application’ every time that we want to publish something? I thought the browser was supposed to be the application.
Copy & paste the code below to embed this comment.
kenny
i don’t know how to search ALA to see if the issue has been raised and it does kind of relate to my last point.
Taking a wedge of text and shoving it in both a html page without formating and a pdf file with formating the resulting file sizes were 12k and 16k.
I guess the extra code needed for the layout in the html and css would bump it up 2 or 3 k, and still would do well to get close to the amount of control you have laying out the pdf, and you have control of font face and sizing and printing.
Is it not the case that pdf could be a viable alternative to html – especially for sites that are no more than a company brochure. For dynamic sites I dont know, I believe you can have forms in pdf? but I dont know how they can be generated on the fly.
119 Reader Comments
Back to the ArticleI’m building a page accoring to the XHTML Mobile Profile. Is it possible to use the “top” and “left” attributes for a div?
jose silva
I’ve used this techique, but finded some trubles on IE.
I’ve coded a webpage, that has only div’s , and it works like i want to on mozilla, opera and netscape but on internet explorer doesn’t show the background of the forms divs, should be white.
heres an example
http://www.t6m.com/cssbug/
and css is on
http://www.t6m.com/cssbug/Event/scripts/real_event.css
feel free to look
thanks in advance
Nicolas
I read this article and all I could find on the net about CSS, tables replacement by DIVs, and so on … To my minf this is too prematured to use such techniques with all browsers having problems with the standard. That’s why I don’t understand why you are all crazy about CSS. CSS is good for formatting, it’s not yet for layouts.
I tried all the techniques to build a 3 columns layout. Each time when reducing the window width, the 3rd column goes under the 2nd one. I can’t even imagine producing a site where my visitors would say : this is not serious.
So I will stay with tables until something serious comes up in browsers. This day, I will convert.
Chris
I have read this article and CSS Design: Taming lists. Great info and very informative, but now I’m looking beyond for a new solution. I have my list of links on the left hand side of the web page, common. I’m got some content in the center of the page, and I want to wrap the bottom across the bottom of the content. We’ve all seen it before, and I know it can be done with pretty pictures: a nice bar on the left that bends at the bottom and juts to the right. Now the question, how do I do his with CSS?
Mario
Well, I like Firebird for it is much lighter then mozilla/netscape but on the other hand it has the exactly same problems rendering my website. I don’t know if the problem is with IE/OPERA (for it displays correctly and the same in both) or with Firebird but since IE community is the largest and I personaly am using OPERA 7.11 I won’t switch until the rendering of CSS is improved.
I do have all of them installed for experiments and I try really hard to get standard, and I am (according to XHTML transitional validator), but MOzilla/Firebird always position my divs a bit lower then it is supposed.
alexBuda
http://exp.hicksdesign.co.uk/
I just wouldlike to ask: Is this frame effect Standard?
You see, I wanted to use that effect for same time now…
Can you give me some light?
Keep up the good work!
May Peace Prevail!
TEYATA OM MUNI MUNI MAHA MUNAYE SOHA
alexBuda
http://exp.hicksdesign.co.uk
I just wouldlike to ask: Is frame effect Standard?
You see I wanted to use that effect for same time now…
Can you give me some light?
Keep up the good work!
May Peace Prevail!
TEYATA OM MUNI MUNI MAHA MUNAYE SOHA
I read that the
position: absolute
doesn’t mean that the position (right: left: top: bottom:) is relative to the entire window, but it is relative to the innermost block containing the element! Is this right?
I thought the
position: absolute
made these distances (right: left: top: bottom:) relative to the entire document, an the
position: relative
made these distances relative to the innermost block element!
Was it wrong?
if so, the html (with CSS) below should work fine, but it doesn’t!
———
css:
.container
{
background-color: Green;
padding: 5px;
}
.content
{
background-color: Red;
padding: 5px;
width: 200px;
right: 3px;
position: absolute;
}
html:
<html>
<head>
<link rel=“stylesheet” href=“provepos.css”>
<title></title>
</head>
<body>
<div class=“container”>
<div class=“content”>here text</div>
</body>
</html>
——-
as you can see, the .content div overlaps the border and goes outside the .container! what’s wrong?
thanks.
Mattia
anu
Hi,
I have a fixed layout of 760 width. I’m using CSS2 to place the buttons in the top nav whose link’s and text come thru server side. Now it requires a line to stretch in the end and only appear when there are less links on the top navigation. As it is dynamic, the line also needs to stretch acordingly hence i don’t want the width for the line to be defined. Just now my code has it. Below is the code for both the HTML and CSS. Browser supported are IE5.0 and above and Netscape 6.1 and above. Please help as soon we are entering to UAT and i still don’t have a fix for it.
HTML :
<div id=“mastHeadContainer”>
<div id=“button1”>About BP</div>
<div class=“padding”></div>
<div id=“button2”>Environment and Society</div>
<div class=“padding”></div>
<div id=“button3”>Product and Services</div>
<div class=“padding”></div>
<div id=“button4”>Careers</div>
<div class=“padding”></div>
<div id=“button5”>Press</div>
<div class=“padding”></div>
<div id=“button6”>Investors</div>
<div class=“padding”></div>
<div class=“bBottom”></div>
</div>
CSS:
.button {
color: #ffffff;
background-color: #99cc00;
height:15px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: bold;
text-align: center;
text-decoration: none;
padding: 2px 5px 2px 5px;
display: block;
float: left;
border-top: 1px solid #99cc00;
border-right: 1px solid #99cc00;
border-left: 1px solid #99cc00;
border-bottom: 1px solid #009900;
}
.button:Hover{
color: #ffffff;
background-color: #009F00;
height: 15px;
padding: 2px 5px 2px 5px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #009900;
border-top: 1px solid #009900;
border-right: 1px solid #009900;
border-left: 1px solid #009900;
}
.button1{
color: #009900;
background-color: #ffffff;
height: 15px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: bold;
text-align: center;
text-decoration: none;
padding: 2px 5px 2px 5px;
display: block;
float: left;
border-top: 1px solid #009900;
border-right: 1px solid #009900;
border-left: 1px solid #009900;
}
.padding{
width: 2px;
float: left;
background-color: #ffffff;
border-bottom: 1px solid #009900;
padding: 0;
margin: 0;
height:20px;
}
.bBottom{
border-bottom: 1px solid #009900;
float:left;
height: 20px;
width: 29.5%;
overflow: hidden;
}
.vertical6{
padding: 0;
margin: 0;
height: 3px;
overflow: hidden;
}
Thanks
a
joha
no entiendo nada !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! buaaaaaaaaaaaaa
Anu, try taking out the width parameter in the bBottom class. Leaves a samll tail in Moz Firebird when I do this.
I do write some tosh. The small tail was, of course, the padding at the end of the buttons. I made the following work for me, you will need to modify the Hover to suit.
body {
margin:10px 10px 0 10px;
padding:0;
background:white;
}
.button {
color: red;
background-color: #CCC;
height:18px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
font-weight: bold;
text-align: center;
text-decoration: none;
padding: 2px 5px 2px 5px;
display: block;
float: left;
border-top: 1px solid blue;
border-right: 1px solid blue;
border-left: 1px solid blue;
border-bottom: 5px solid black;
}
.padding {
width: 5px;
height: 18px;
padding: 2px 0px 2px 0px;
float: left;
/* background-color: #ffffff; inherit ‘body’*/
border-top: 1px solid white;
border-bottom: 5px solid red;
margin: 0;
}
Don’t need to call the bBottom class.
simon booth
Here is a slight modification of Justin’ script. I’m far from a Javascript/DOM expert, so here is my attempt to get it right.
The difference in this script is it looks for a div element with a class named ‘container’. Inside the container you have your children div elements. The script calculates and sets the height for the container div, then goes finds the children div elements of the container and sets their height as well.
In the body element put onload=‘balanceContainer()’ and thats it. It should work in IE 5.5+ and any Mozilla browser. Works in IE6/Mozilla 1.4, but haven’t tried it in Opera/Konqueror/Safari yet though.
=================
/* Parse again -> Insert offsetHeight to all children */function parseContainer(div) {
var tLength=0;
var nLength=0;
var childNode;
var children=div.childNodes;
for (i = 0; i < children.length; i++) {
childNode=children.item(i);
nLength=childNode.offsetHeight;
if (nLength > tLength) { tLength=nLength; }
}
div.style.height = tLength + ‘px’;
for (i = 0; i < children.length; i++) {
setSubContainer(children,tLength);
}
}
function setSubContainer(subdiv,length) {
if (subdiv.tagName == ‘DIV’) {
subdiv.style.height=length + ‘px’;
}
}
A. Novice With-A-Question
How about this… Setup three main divs called top, middle and bottom. The top div is absolute at the top of the page/screen, the middle is relative to the bottom of the top. The bottom is relative to the middle.
So the middle and bottom divs are relatively positioned vertically.
Within the middle div (container), create the column divs (1 to 4). The column divs are relatively positioned horizontally. If we assume that each column div is evenly spaced then they would be 25% of the width of the container div.
Is what I’ve described above impossible to do with divs, CSS, and without tables? Is is possible for a div to automatically expand in the way that table cells do. If divs can expand the way table cells do, then do relatively positioned divs, automatically readjust their based on other elements within a document… specifically other divs?
I’m hoping the answers are yes, yes, and yes. If not please explain.
Idoia
hmm isn’t all this suposed to be geared towards accesibility? some areas of info on this page (i.e. samples/examples of code) are spread all over the place. Just thought i’d let you kno and ask if anyone knows why.
Erland Flaten
http://webforums.macromedia.com/dreamweaver/messageview.cfm?catid=189&threadid=735071
I just discoverd that the topic how to get a DIV to expand its container DIV or other element is discussed here aswell. I posted the similar on the Macromedia forum this friday . One partial solution is to float the child DIVs but then I had to REMOVE absoulte positioning on those DIVs. Can you belive that! Flexibel layout consepts are something I have to deliver. And pushing the child DIVs around with padding and borders is not good.
What is the Übersolution to follow folks?
Erland FLaten, Lillehammer Norway.
Wout
You can find an other solution at: http://www.s7u.co.uk/layouts/3cols.html
This one works ok without the use of javascript!
kenny
>>An interactive page such as a web page is an application.
if this is the case why dont we have a browser that works like the adobe acrobat interface, removing navigation into a side bar.
If you could somehow declare to a user agent what is your navigation or even a site index, ‘footer’ information and all that other standard stuff it’s display could be removed from the ‘web’, ‘pda’, ‘mobile phone’ screen.
Why do we need to write an ‘application’ every time that we want to publish something? I thought the browser was supposed to be the application.
kenny
i don’t know how to search ALA to see if the issue has been raised and it does kind of relate to my last point.
Taking a wedge of text and shoving it in both a html page without formating and a pdf file with formating the resulting file sizes were 12k and 16k.
I guess the extra code needed for the layout in the html and css would bump it up 2 or 3 k, and still would do well to get close to the amount of control you have laying out the pdf, and you have control of font face and sizing and printing.
Is it not the case that pdf could be a viable alternative to html – especially for sites that are no more than a company brochure. For dynamic sites I dont know, I believe you can have forms in pdf? but I dont know how they can be generated on the fly.