Click to See Complete Forum and Search --> : Absolutely not!
David Harrison
08-24-2003, 10:48 AM
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.
Charles
08-24-2003, 11:01 AM
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.
David Harrison
08-24-2003, 11:08 AM
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.
Doesn't use float, but works in NN 4.7:
<!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>
David Harrison
08-24-2003, 12:29 PM
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).
Charles
08-24-2003, 12:39 PM
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.
David Harrison
08-24-2003, 01:31 PM
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.
Robert Wellock
08-29-2003, 08:39 AM
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.
David Harrison
08-29-2003, 01:11 PM
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