473,320 Members | 1,939 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

vertical extension of element

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
Jul 20 '05 #1
4 2453
In article <3f********@news.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.

Jul 20 '05 #2
In article <3f********@news.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.

Jul 20 '05 #3
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

Jul 20 '05 #4
In article <3f**********@news.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.

Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: abracad | last post by:
Hi Is it possible to vertically align an image in the middle of a DIV of fixed height?
10
by: Markus Ernst | last post by:
Hi I have a strange problem with vertical-align. The case can be viewed at http://www.brainput.info/geschichte.html. HTML code: <div id="bild"><img src="geschichte.gif" width="274"...
16
by: Uncle Pirate | last post by:
This has me stumped. I am trying to use as little space as possible at the top of my document but Firefox/Mozilla insists on placing vertical space before any element. IE displays it correctly...
2
by: Stanimir Stamenkov | last post by:
I'm trying to clear some sizing issues relative to the initial containing block and the root document element. The sample document I'm trying with: http://stanio.info/viewport_fill.html ...
3
by: man-in-nature | last post by:
Hello, I have already read several existing posts about xsd:extension, but do not find something useful to my test case. I have one xml file and one xsd file. I can use a simple command line...
5
by: Jeffry van de Vuurst | last post by:
Hi, I'm working on an xml schema and I'm running into some problems relating substitutionGroups and extensions. This xsd validates fine: There are three elements and three complex types and...
0
by: robert | last post by:
Hi all, I'm having a hard time resolving a namespace issue in my wsdl. Here's an element that explains my question, with the full wsdl below: <definitions name="MaragatoService"...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
40
by: maya | last post by:
hi, how do I get text to vertical-align inside a div? http://www.mayacove.com/misc/home.html vertical-align should work, according to this:...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.