non-absolute divs, and 100% height

Duane Lambe

On some suggestions from this group, I've started to turn my internal
helpdesky site for our company to non-absolute positioning. I've been
reading O'Reilly's CSS book, and several [million] web sites and tips.
For the most part, things are going OK, but I can't seem to find an
answer to a particular problem.

Using a simpler example, below's some stuff...what I'm trying to do,
is get the DIVs inside the .mainbody DIV to be 100% of their parent's
height - these are namely the .leftnav and .middle DIVs. All I've seen
are absolute positioning examples, and I'm trying very hard to stay
away from that.

I just want both the .leftnav and .middle DIVs to scale in height
depending on which one's larger. Currently they don't budge in
relation to each other. I can get them to 100% of the /body/, if I set
a height on the body tag, but I can't get that same logic working
inside .mainbody, which I thought was the .leftnav/.middle parent.

losing it... thanks for any help :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">

</style>
</head>

<body>
<div class="contain">
<div class="header">
header
</div>
<div class="mainbody">
<div class="leftnav">
leftnav<br /><br /><br /><br /><br />
</div> 
<div class="middle">
middle
</div> 
</div> 
<div class="footer">
footer
</div> 
</div> 
</body>
</html>

Jul 20 '05 #1

Follow Post Reply

4930

Lauri Raittila

In article Duane Lambe wrote:

On some suggestions from this group, I've started to turn my internal
helpdesky site for our company to non-absolute positioning. I've been
reading O'Reilly's CSS book, and several [million] web sites and tips.
For the most part, things are going OK, but I can't seem to find an
answer to a particular problem.
Would this help?
http://www.student.oulu.fi/~laurirai...float2col.html
Using a simpler example, below's some stuff...what I'm trying to do,
is get the DIVs inside the .mainbody DIV to be 100% of their parent's
height - these are namely the .leftnav and .middle DIVs. All I've seen
are absolute positioning examples, and I'm trying very hard to stay
away from that.

You are solving wrong problem. There is no need to elements actually be
same height, they just need to look like that.

[Snip code, I would prefer URL.]

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #2

Duane Lambe

Kinda helps, but not quite what I was going for. That also reacts
badly with a container DIV that sets margins on both sides of the
page.... not very malleable, but thanks for the link.

I got a great reply from the guy that does Selectutorial
http://css.maxdesign.com.au/
which involved using a repeating background image, rather than a
background color for the DIV. Works great, and it scales the color
down should the main content DIV get larger than it.

Thanks again for the reply!

On Thu, 4 Dec 2003 00:33:39 +0200, Lauri Raittila
<la***@raittila.cjb.net> wrote:

In article Duane Lambe wrote:
On some suggestions from this group, I've started to turn my internal
helpdesky site for our company to non-absolute positioning. I've been
reading O'Reilly's CSS book, and several [million] web sites and tips.
For the most part, things are going OK, but I can't seem to find an
answer to a particular problem.

Would this help?
http://www.student.oulu.fi/~laurirai...float2col.html
Using a simpler example, below's some stuff...what I'm trying to do,
is get the DIVs inside the .mainbody DIV to be 100% of their parent's
height - these are namely the .leftnav and .middle DIVs. All I've seen
are absolute positioning examples, and I'm trying very hard to stay
away from that.

You are solving wrong problem. There is no need to elements actually be
same height, they just need to look like that.

[Snip code, I would prefer URL.]

Jul 20 '05 #3

Lauri Raittila

In article Duane Lambe wrote:

Please don't top post in future.

[about my 2 col float example]

Kinda helps, but not quite what I was going for. That also reacts
badly with a container DIV that sets margins on both sides of the
page.... not very malleable, but thanks for the link.
On what browser? What happens? I tried different margin withs on Opera 7,
and only problem was that my list missed list-style:none;
I got a great reply from the guy that does Selectutorial
http://css.maxdesign.com.au/
which involved using a repeating background image, rather than a
background color for the DIV. Works great, and it scales the color
down should the main content DIV get larger than it.

Yes, that works too. Of course it depends on images, but that is small
drawback, unless you use such colors that are impossible to read whitout
image.

[snip fullquote]

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #4

Duane Lambe

On Thu, 4 Dec 2003 22:38:13 +0200, Lauri Raittila
<la***@raittila.cjb.net> wrote:

[about my 2 col float example]
Kinda helps, but not quite what I was going for. That also reacts
badly with a container DIV that sets margins on both sides of the
page.... not very malleable, but thanks for the link.

On what browser? What happens? I tried different margin withs on Opera 7,
and only problem was that my list missed list-style:none;

IE - I don't have the example saved anymore, but all I did was add a
container div with a margin-left/right:10%, and the positioning of the
text in the right div misbehaved a little - like it was being pushed
over by the list in the left div, but only where the list was parallel
with the right-side text. There's likely a way around it, but I was
going for something a little simpler.

I got a great reply from the guy that does Selectutorial
http://css.maxdesign.com.au/
which involved using a repeating background image, rather than a
background color for the DIV. Works great, and it scales the color
down should the main content DIV get larger than it.

Yes, that works too. Of course it depends on images, but that is small
drawback, unless you use such colors that are impossible to read whitout
image.

True, a slight drawback, but I find it a little more intuitive,
instead of using hacks - however helpful they may be - to achieve the
same. Like I say, I'm no css-god, and I do a million other things
around here. This helpdesk site is just what I can eke out with spare
brain cycles. :)

Jul 20 '05 #5

Lauri Raittila

In article Duane Lambe wrote:

On Thu, 4 Dec 2003 22:38:13 +0200, Lauri Raittila
<la***@raittila.cjb.net> wrote:
[about my 2 col float example]
Kinda helps, but not quite what I was going for. That also reacts
badly with a container DIV that sets margins on both sides of the
page.... not very malleable, but thanks for the link.

On what browser? What happens? I tried different margin withs on Opera 7,
and only problem was that my list missed list-style:none;

IE - I don't have the example saved anymore, but all I did was add a
container div with a margin-left/right:10%, and the positioning of the
text in the right div misbehaved a little - like it was being pushed
over by the list in the left div, but only where the list was parallel
with the right-side text. There's likely a way around it, but I was
going for something a little simpler.

Hm. need to test that someday, when I have time.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #6

non-absolute divs, and 100% height

This discussion thread is closed

Similar topics