Flexible Layouts with CSS Positioning

by Dug Falby

119 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. no entiendo nada !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! buaaaaaaaaaaaaa

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. >>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.
  19. 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.