Thank you very much! I succesfully followed your advice.
With the resulting design template (see below), i encounter some
enoying problems with are, up to my mind, typical of CSS (in the state
of the art):
* overlay of information from a div box to another in the window gets
very small
* cross browser design problems (OK for mozilla/linux, mozilla/win2k,
konqueror/linux, but *Not OK* for IE6/win2k)
* div/CSS has great advantages over tables but I can not implement a
box with a fixed minimum size, feature I can implement with a fixed
width size transparent pixel image within a table cell
template:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>extensible header + 3 columns design</title>
<style type="text/css" media="all">
#wrap {position: relative;}
#leftcontent {
float: left;
width:200px;
border:1px solid #000;
}
#centercontent {
position: absolute;
top: 0px;
margin-left: 210px;
margin-right:210px;
}
#rightcontent {
float: right;
width:200px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="header">
<p>-- Header content -- </p>
</div>
<div id="wrap">
<div id="leftcontent">
<h1>leftcontent</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit...</p>
</div>
<div id="centercontent">
<h1>centercontent</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit...</p>
</div>
<div id="rightcontent">
<h1>rightcontent</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit...</p>
</div>
</div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Neal <ne*****@yahoo.com> wrote in message news:<op**************@news.individual.net>...
On 19 Jun 2004 06:07:06 -0700, Marc-Olivier BERNARD
<s_*********@hotmail.com> wrote:
Hi there,
Let me ask it in other words:
consider the three columns technique with one fluid column center, as
in
http://www.glish.com/css/7.asp
with a top fixed area (with text: 'LAYOUT TECHNIQUES: 3 columns, the
holy grail')
My simple question is: is it *possible* with CSS1 or CSS2 this top
area and the three column to adjust themselves if i put more text in
the top area?
Of course. The top div will enlarge to hold its non-floated content.
However, if we position the columns with absolute positioning with respect
to the viewport, we have a problem.
The solution, therefore, is to do this:
<div id="header">
-- Header content --
</div>
<div id="wrap">
<div id="content">
-- Content for center section --
</div>
-- Other column divs --
</div>
Style like this: #wrap {position: relative;} The contained elements are
now positioned with respect to the wrap div.
