By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
454,631 Members | 1,345 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 454,631 IT Pros & Developers. It's quick & easy.

How to create a CSS layout with verticaly variable area?

P: n/a
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.

?
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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_*********@hotmail.com (Marc-Olivier BERNARD) wrote in message news:<a8**************************@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.

?

Jul 20 '05 #2

P: n/a
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.
Jul 20 '05 #3

P: n/a
On 19 Jun 2004 06:07:06 -0700, Marc-Olivier BERNARD
<s_*********@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!
Jul 20 '05 #4

P: n/a
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.

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.