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.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.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>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).See <!-- m --><a class="postlink" href="http://www.rickbull.co.uk/">http://www.rickbull.co.uk/</a><!-- m --> or <!-- m --><a class="postlink" href="http://www.saintjohns.ang-md.org/">http://www.saintjohns.ang-md.org/</a><!-- m --> to see how to make your page transform gracefully with version 4 browsers.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 <!-- m --><a class="postlink" href="http://www.rickbull.co.uk/">http://www.rickbull.co.uk/</a><!-- m --> 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.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.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
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.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.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>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).See <!-- m --><a class="postlink" href="http://www.rickbull.co.uk/">http://www.rickbull.co.uk/</a><!-- m --> or <!-- m --><a class="postlink" href="http://www.saintjohns.ang-md.org/">http://www.saintjohns.ang-md.org/</a><!-- m --> to see how to make your page transform gracefully with version 4 browsers.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 <!-- m --><a class="postlink" href="http://www.rickbull.co.uk/">http://www.rickbull.co.uk/</a><!-- m --> 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.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.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