www.webdeveloper.com
Results 1 to 9 of 9

Thread: Absolutely not!

  1. #1
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276

    Absolutely not!

    How can I have two div tags side by side without using absolute positioning?

    The left div will be of width 164px and the right div will be from where the left div left off to the right hand side of the page. There will be a 10px margin around both divs but they will be of different, unknown, heights.

    I already have it looking how I want but there are some older browsers that don't support absolute positioning, so has anyone got any ideas?


    Edit: If you're not quite sure how I want it to look from my description then let me know and I'll upload an example.
    Last edited by David Harrison; 08-24-2003 at 11:51 AM.
    Every fight is a food fight when you’re a cannibal.

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    Ideas?

    1) Don't worry about those older browsers. Better yet, use the @import rule to hide your absolute positioning from those older browsers.

    2) Float those DIVs.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  3. #3
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Yeah I have imported the layout to "protect" the older browsers:

    <style type="text/css"><!--

    @import url(layout.css); /* I have used @import for the layout because some old browsers (specifically Netscape 4.79) don't support absolute positioning and so some content cannot be viewed. */

    --></style>

    That was literally copied and pasted straight out of the source. I am suddenly worried about absolute positioning because of gil_davis's description, "Die-hard NS 4.X User". I don't think Netscape 4 supports absolute positioning but I may be wrong.

    Currently I use absolute positioning to position the side bar div and I use the margin to position the main div.

    Could you give me an example of floating div's I don't have any experience of floating things and the book I have doesn't cover it very well.
    Last edited by David Harrison; 08-24-2003 at 12:12 PM.
    Every fight is a food fight when you’re a cannibal.

  4. #4
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Doesn't use float, but works in NN 4.7:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #left {
    	width: 164px;
    	border: 1px solid;
    }
    #right {
    	position: absolute;
    	margin-left: 174px;
    	border: 1px solid;
    }
    </style>
    </head>
    <body>
    <div id="right">Right side div</div>
    <div id="left">Left side div</div>
    </body>
    </html>

  5. #5
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    That's pretty similar to what I've got now:

    #all #sb{position:absolute;top:10px;left:10px;width:164px;}
    #all #main{border:2px solid;padding:0;cursor:default;margin:0 0 0 174px;}

    Once again copied literally from the source, (well layout.css anyway).
    Every fight is a food fight when you’re a cannibal.

  6. #6
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    See http://www.rickbull.co.uk/ or http://www.saintjohns.ang-md.org/ to see how to make your page transform gracefully with version 4 browsers.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  7. #7
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Hey charles, you may want to specify a default font family here:

    font-family: Copperplate Gothic Light;

    Another reason why I wanted to replace the absolute positioning was because then I could satisfy this rule in the WCAG:

    3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2]
    For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units. If absolute units are used, validate that the rendered content is usable.

    I notice that at http://www.rickbull.co.uk/ he uses px all over the place and yet he still claims to have AAA conformance. Does this mean that px aren't classed as absolute units? Or is it that on his page "the rendered content is usable", although I'm not sure what that means.
    Every fight is a food fight when you’re a cannibal.

  8. #8
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    All Rick's pages aren't technically AAA (some are some are not) although the majority of them are very close to that standard and yes pixels are allowed for AAA.

  9. #9
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    I'm quite glad about px being allowed because I have used them for absolutely everything. But I'm still not sure what the guidelines mean when they say:
    If absolute units are used, validate that the rendered content is usable
    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles