Stylesheets - New formulation: How to create a CSS layout with verticaly variable area?

Author

New formulation: How to create a CSS layout with verticaly variable area?

Marc-Olivier BERNARD

2004-06-19, 12:15 pm

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?

I can design that behaviour with tables and div sections, but not with
div sections only.

I would be satisfied of any answer ("yes" or "your question is
evident"): I must mention that I searched around the web and the
groups for the answer).

Best regards,

s_p_a_m_mob@hotmail.com (Marc-Olivier BERNARD) wrote in message news:<a846118c.0406181032.57ef4537@posting.google.com>...
> Hi there,
>
>
> I need to create a classic layout like this:
>
> ------------------------\
> top |
> ------------------------|
> | | |
> left| center |right|
> | | |
> | |
> | | |
> ------------------------|
> bottom |
> ------------------------/
>
> only with div sections and CSS1 or CSS2 stylesheet, but
> where all area are verticaly variable, in other words, adjust
> themselves with additional text.
>
> ?

Neal

2004-06-19, 12:15 pm

On 19 Jun 2004 06:07:06 -0700, Marc-Olivier BERNARD
<s_p_a_m_mob@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.

Neal

2004-06-19, 7:15 pm

On 19 Jun 2004 06:07:06 -0700, Marc-Olivier BERNARD
<s_p_a_m_mob@hotmail.com> wrote:

> http://www.glish.com/css/7.asp

BTW, try looking at this in Opera 7.23, and then refreshing the display
(not reload). Interesting!

Marc-Olivier BERNARD

2004-06-22, 12:16 pm

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 <neal413@yahoo.com> wrote in message news:<opr9ue5d0o6v6656@news.individual.net>...
> On 19 Jun 2004 06:07:06 -0700, Marc-Olivier BERNARD
> <s_p_a_m_mob@hotmail.com> wrote:
>
>
> 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.