Discuss: Flexible Layouts with CSS Positioning
by Dug Falby
- Editorial Comments
112 A line too far - a retrospective
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.
posted at 02:52 pm on September 7, 2003 by
113 Modification of script
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’;
function setSubContainer(subdiv,length) {
if (subdiv.tagName == ‘DIV’) {
subdiv.style.height=length + ‘px’;
}
}
posted at 09:56 am on October 17, 2003 by simon booth
114 question from a novice
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.
posted at 07:27 pm on October 26, 2003 by A. Novice With-A-Question
115 Mozilla + Mac
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.
posted at 10:38 am on November 26, 2003 by Idoia
116 How to get parent DIV to resize after contents in
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.
posted at 05:34 pm on November 27, 2003 by Erland Flaten
117 An other solution.
You can find an other solution at: http://www.s7u.co.uk/layouts/3cols.html
This one works ok without the use of javascript!
posted at 05:27 am on January 7, 2004 by Wout
118 Re: How to adapt designers to that method?
>>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.
posted at 02:43 pm on January 13, 2004 by kenny
119 off topic but..
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.
posted at 03:13 pm on January 13, 2004 by kenny
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)




111 A line too far
Anu, try taking out the width parameter in the bBottom class. Leaves a samll tail in Moz Firebird when I do this.
posted at 02:05 pm on September 7, 2003 by