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 ArticleAnu, 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.