Flexible Layouts with CSS Positioning

by Dug Falby

119 Reader Comments

Back to the Article
  1. Hire a proffesional.

    The person must be able to communicate with the designers. He should listen to what their goals are and teach them how to achieve the desired result, explaining how and why, citing technical references.

    The other concern is the separation of business logic and presentation. The programmers must also work with the designers so the objective and procedure can be realized and a division of labor is decided early on.

    when business logic and presentation logic are separated, more flexibility will be gained. The result will be a more extensible system.

    Copy & paste the code below to embed this comment.
  2. > So I was thinking of a method:
    > – the creative designer designs a very good looking illustration
    > – the tech designer sets a complete and enumerative page with all the
    “design objects” and their respective css/html


    KPOCHA,

    I guess I would agree with Garrett above…

    However, I think the real problem is the definition of “creative” as in “creative designer”.

    An interactive page such as a web page is an application, and the person that applies creative flair, understanding of production restrictions, understanding of user behaviour and so on is an application designer. The term “web designer” should probably never have been coined.

    I expect an application designer to think in terms of “design objects” because that is the only way his ideas will become reality.

    It’s hard to bill clients for tasks that they don’t understand or perceive to be valuable. The reason there is so little quality client-side scripting (for example) out there is because it’s impossible to sell to a client (he’s seen the pretty photoshop layout, why does he have to pay extra for javascript development?). In practise, your “creative designer” and your “tech designer” are the same person.

    As Garrett says, hire a pro;-)

    Best
    -dug

    ps
    Happy new year all

    Copy & paste the code below to embed this comment.
  3. There’s this really irritating bug in IE6 that makes some pages laid out with floats repeat the last six or so characters on the page a couple of lines below the proper end of the page. This maddness does something like this:

    Copyright 2003, A List Apart

    t Apart

    Anybody else experiencing this? Both my CSS and XHTML validate and here they are:

    <body>
    <div id=“wrapper”>
    <!—****************************** WRAPPER ******************************—>

    <!—HEADER
    ******************************—>
    <div id=“header”>
    <div class=“content”>
    #header {

    padding: 0 0 0 0; margin: 0 0 0 0; float: left; display: inline; width: 100%; height: auto; }
    </div>
    <!—/content—>
    </div> <!—/header—>

    <!—COL1
    ******************************—>
    <div id=“col1”>
    <div class=“content”>
    #col1 {

    padding: 0 0 0 0; margin: 0 0 0 0; float: left; display: inline; width: 220px; height: auto; }
    </div>
    <!—/content—>
    </div> <!—/col1—>

    <!—COL2
    ******************************—>
    <div id=“col2”>
    <div class=“content”>
    #col2 {

    padding: 0 0 0 0; margin: 0 0 0 0; float: left; display: inline; width: 420px; height: auto; }
    </div>
    <!—/content—>
    </div> <!—/col2—>

    <!—FOOTER
    ******************************—>
    <div id=“footer”>
    <div class=“content”>
    #footer {

    padding: 0 0 0 0; margin: 0 0 0 0; float: right; display: inline; width: 100%; height: auto; }
    </div>
    <!—/content—>
    </div> <!—/footer—>

    <!—****************************** /WRAPPER ******************************—>
    </div> <!—/wrapper—>
    </body>
    </html>

    Copy & paste the code below to embed this comment.
  4. The problem was the comments. Take all comments out, bug fixed but bigger headache for colleagues! Maddness..

    Copy & paste the code below to embed this comment.
  5. Greetings,

    I have been currently working on the url site above which I entered in for “Your Url”. Anyhow I am fairly new at css and my problem is this, when I create a page layout in css within a certain resolution then the page is viewed in another higher or lower resolution the page looks different and is out of wack. How can I fix this so it will look the same at all resolutions……

    Thanks for you time,
    Lekeno

    Copy & paste the code below to embed this comment.
  6. Just implemented this code for the account managemene site of Citysearch.com. PDA is functional, WOW!!!!
    Compatible with Windows IE5.0+ NN6.0+

    - Doesn’t work in MacIE5 and not sure how to fix it yet.
    – Main Nav buttons display in opposite order of code? very weird.

    Any thoughts on the Mac issue would be welcome.

    Copy & paste the code below to embed this comment.
  7. Back in article 119 there was demonstation of how to use DIV and SPAN in place of the usual table format within Forms. Unfortunately there was no comment button at the bottom of the article for me to ask the following question, so forgive me if I use this article which is based roughly on the same subject ;-)
    In most forms the writer usually likes to employ some form of validation and check on compulsory entries.
    Now this is normally done with reference to the “name” elements in the table within the Form, my question is, how can this be accomplished using the DIV and SPAN method??

    Copy & paste the code below to embed this comment.
  8. I think the article was very informative; I being a navice at this has a resolution problem! My site does not show properly at a higher resolution and I don’t know what to do? Can anyone help me please?
    Thanks

    Copy & paste the code below to embed this comment.
  9. This is not about coding. This is about peole who care. And Dug, welcome to the club. Your article has brightened my day. For all of us that we are not hardcore coders, your approach is a really cool way to get our stuff done right.
    Thanks from Southern Chile.

    Copy & paste the code below to embed this comment.
  10. what’s the difference between SPAN and DIV?

    Copy & paste the code below to embed this comment.
  11. I’m building a page accoring to the XHTML Mobile Profile. Is it possible to use the “top” and “left” attributes for a div?

    Copy & paste the code below to embed this comment.
  12. 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

    Copy & paste the code below to embed this comment.
  13. 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.

    Copy & paste the code below to embed this comment.
  14. 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?

    Copy & paste the code below to embed this comment.
  15. 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.
  16. 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

    Copy & paste the code below to embed this comment.
  17. 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

    Copy & paste the code below to embed this comment.
  18. 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

    Copy & paste the code below to embed this comment.
  19. 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

    Copy & paste the code below to embed this comment.
  20. no entiendo nada !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! buaaaaaaaaaaaaa

    Copy & paste the code below to embed this comment.
  21. Anu, try taking out the width parameter in the bBottom class. Leaves a samll tail in Moz Firebird when I do this.

    Copy & paste the code below to embed this comment.
  22. 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.

    Copy & paste the code below to embed this comment.
  23. 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.
  24. 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.
  25. 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.

    Copy & paste the code below to embed this comment.
  26. 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.

    Copy & paste the code below to embed this comment.
  27. You can find an other solution at: http://www.s7u.co.uk/layouts/3cols.html

    This one works ok without the use of javascript!

    Copy & paste the code below to embed this comment.
  28. >>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.
  29. 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.

    Copy & paste the code below to embed this comment.