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

Web Design Forum

Convenient web based access to our favorite web design Usenet groups

Web Design > Web Design > Stylesheets > New formulation: How to create a CSS layout with verticaly variable area?

This is Interesting: Free Magazines for Graphics designers and webmasters

Last Thread Next Thread

Author

Thread

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

Marc-Olivier BERNARD

06-19-04 - 05: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.5
7ef4537@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.
>
> ?

[ Post Follow-Up to this message ]

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

Neal

06-19-04 - 05: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.

[ Post Follow-Up to this message ]

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

Neal

06-20-04 - 12:15 AM

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!

[ Post Follow-Up to this message ]

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

Marc-Olivier BERNARD

06-22-04 - 05: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>...[co
lor=darkred]
> 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 a
re
> now positioned with respect to the wrap div.[/color]

[ Post Follow-Up to this message ]