- From: Stephanos Piperoglou <stephanos@internet.com>
- Date: Wed, 10 Jun 1998 15:10:44 +0100 (BST)
- To: Frank Boumphrey <bckman@ix.netcom.com>
- cc: Liam Quinn <liam@htmlhelp.com>, "html (w3)mailing list" <www-html@w3.org>
On Wed, 10 Jun 1998, Frank Boumphrey wrote:
> Stephanos,
> I would be glad if you could share your code with us.
Killed the width on the main column (why have an explicit width?),
added top to sidenote and moved to the bottom so it will make more
sense semantically (now th note appears after the paragraph in legacy
browsers - depends on the context, really) otherwise everything was
right. Here it is. Works with IE4/NS4 and looks relatively OK on older
browsers.
The backgrounds are wrong on NS4, but this has nothing to do with
positioning, and is a Known Issue (i.e. a Bug).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
.sidebar {
position: absolute;
background-color: green;
width: 1in;
left: 0.1in;
top: 0;
}
.container {
position: relative;
background-color: red;
padding-left: 1.2in;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="container">
This is a paragraph without a side note. This is a paragraph without a
side note. This is a paragraph without a side note. This is a
paragraph without a side note. This is a paragraph without a side
note. This is a paragraph without a side note. This is a paragraph
without a side note. This is a paragraph without a side note. This is
a paragraph without a side note. This is a paragraph without a side
note. This is a paragraph without a side note. This is a paragraph
without a side note. This is a paragraph without a side note. This is
a paragraph without a side note. This is a paragraph without a side
note. This is a paragraph without a side note. This is a paragraph
without a side note. This is a paragraph without a side note. This is
a paragraph without a side note. This is a paragraph without a side
note.
</DIV>
<DIV CLASS="container">
This is a paragraph with a side note. This is a paragraph with a
side note. This is a paragraph with a side note. This is a
paragraph with a side note. This is a paragraph with a side
note. This is a paragraph with a side note. This is a paragraph
with a side note. This is a paragraph with a side note. This is a
paragraph with a side note. This is a paragraph with a side
note. This is a paragraph with a side note. This is a paragraph
with a side note. This is a paragraph with a side note. This is a
paragraph with a side note. This is a paragraph with a side
note. This is a paragraph with a side note. This is a paragraph
with a side note. This is a paragraph with a side note.
<DIV CLASS="sidebar">
A side note
</DIV>
</DIV>
<DIV CLASS="container">
This is a paragraph without a side note. This is a paragraph without a
side note. This is a paragraph without a side note. This is a
paragraph without a side note. This is a paragraph without a side
note. This is a paragraph without a side note. This is a paragraph
without a side note. This is a paragraph without a side note. This is
a paragraph without a side note. This is a paragraph without a side
note. This is a paragraph without a side note. This is a paragraph
without a side note. This is a paragraph without a side note. This is
a paragraph without a side note. This is a paragraph without a side
note. This is a paragraph without a side note. This is a paragraph
without a side note. This is a paragraph without a side note. This is
a paragraph without a side note. This is a paragraph without a side
note.
</DIV>
</BODY>
</HTML>
-- Stephanos Piperoglou -- stephanos@internet.com ---------------------
Visit HTML with Style at http://www.webreference.com/html/
Every second Thursday a new tutorial on HTML and CSS, plus much,
much more... for those who like to author Web pages with Style
-----------------------------------------------------------------------
Received on Wednesday, 10 June 1998 10:14:58 UTC