vertical extension of element

[Markus Ernst]

Hi

I try to build a website with a css layout. I have for example 2 div
elements with a specified width and a float-left, and the 3rd div element
has margin:0px which makes it extend to the rest of the window (or the
containing element).

Now this works well horizontally, but not vertically. Elements with
margin:0px are only as high as the text they contain. Is there a way to make
an element extend to the available height with css means (without
javascript)?

This is the same in Netscape 7 and IE 6. I use the stridt dtd.

Thanks for a hint.

Markus

[Lauri Raittila]

In article <3f********@new s.bluewin.ch>, Markus Ernst wrote:

Hi

I try to build a website with a css layout. I have for example 2 div
elements with a specified width and a float-left, and the 3rd div element
has margin:0px which makes it extend to the rest of the window (or the
containing element).
URL?
Now this works well horizontally, but not vertically. Elements with
margin:0px are only as high as the text they contain. Is there a way to make
an element extend to the available height with css means (without
javascript)?

Just answered something like this yesterday:
http://www.student.oulu.fi/~laurirai/www/css/#float2col

--
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.

[Lauri Raittila]

In article <3f********@new s.bluewin.ch>, Markus Ernst wrote:

Hi

I try to build a website with a css layout. I have for example 2 div
elements with a specified width and a float-left, and the 3rd div element
has margin:0px which makes it extend to the rest of the window (or the
containing element).
URL?
Now this works well horizontally, but not vertically. Elements with
margin:0px are only as high as the text they contain.
Just answered something like this yesterday:
http://www.student.oulu.fi/~laurirai/www/css/#float2col
Is there a way to make an element extend to the available height
with css means (without javascript)?

Yes, positioning things absolutely. Basically, bottom:0;

--
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.

[Markus Ernst]

Thank you for your reply!

URL?
http://www.markusernst.ch/index_neu.php?rot=4&blau=1

Note that it is a mess as I am in the development process. But you can see
the point: the vertical lines in the third row, in the blue vertical column
and at the bottom of the content element have margin:0px and should extend
over the whole available space, like the version I made with absolute
positioning:
http://www.markusernst.ch/index_neu_...p?rot=4&blau=1
Just answered something like this yesterday:
http://www.student.oulu.fi/~laurirai/www/css/#float2col

This is an interesting site, I will take my time to explore it.

Is there a way to make an element extend to the available height
with css means (without javascript)?

Yes, positioning things absolutely. Basically, bottom:0;

Actually this is a try to go away from absolute positioning because this
makes some severe problems:
- bottom:0 is not interpreted by some browsers
- width:100% in the box model is treated as the window with, not the element
width (which in my oppinion is a mistake of the box model); same with
height.
- Padding and border are added to the element width according to the box
model, which triggers a scroll bar in connection with width or height:100%
(which in my oppinion is a mistake of the box model, too; the "broken" IE5
box model would be of much more convenience for every kinds of layouts)
- Netscape 7 does only print page 1 of absolute positioned elements with
long content
- Netscape 4 makes problems with transparent elements

So I think absolute positioning is not applicable for complex layouts with
lots of content, but rather for positioning special elements on a page or
for easy small layouts. That's why I try to do the same thing I did already
with absolute positioning now with floating divs (which is a nice challenge
actually).

--
Markus

[Lauri Raittila]

In article <3f**********@n ews.bluewin.ch> , Markus Ernst wrote:

Thank you for your reply!

URL?
http://www.markusernst.ch/index_neu.php?rot=4&blau=1

Should look something like this:
http://www.markusernst.ch/index_neu_...p?rot=4&blau=1

Just answered something like this yesterday:
http://www.student.oulu.fi/~laurirai/www/css/#float2col
This is an interesting site, I will take my time to explore it.

It seems, that is almost same solution applies to your case:
#inh {border-left:1px solid #ccc;}
#kopf4 {border-right:0;}

And I didn't even need to look source code ;-)
Tested on O7. My grey is incorrect. If you have soem pages where #kopf4
is longer than #inh, use method I used in example in URL I gave earlier.

Is there a way to make an element extend to the available height
with css means (without javascript)?

Yes, positioning things absolutely. Basically, bottom:0;

Actually this is a try to go away from absolute positioning because this
makes some severe problems:
Unfortunately there is no other way to make things continue to bottom.
Fortunately that is not often actually needed, so I didn't go to details
untill URL.
- Netscape 7 does only print page 1 of absolute positioned elements with
long content
That's bad.
So I think absolute positioning is not applicable for complex layouts with
lots of content, but rather for positioning special elements on a page or
for easy small layouts. That's why I try to do the same thing I did already
with absolute positioning now with floating divs (which is a nice challenge
actually).

I think same.

--
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.