doing a <table>- layout with <div>

[Robert Ludewig]

Hello,

I hearded that is not good practice to use html for site layouting purposes.
Thats why I try to use CSS and <div>
I would like to achive the following effect.

 

[Adrienne]

Hello,

I hearded that is not good practice to use html for site layouting
purposes.

HTML - Hypertext Markup Language is used to markup content. It is what a
browser reads and renders. You are getting confused with HTML tables.
Tables are fine if they are used for what they are for, displaying tabular
data, for example a table of expenses.

Thats why I try to use CSS and <div>

DIV is an HTML element, so I guess you'll have to use HTML afterall ;-)
But that's very good that you want to separate content from presentation.

I would like to achive the following effect.

---------------------------------------------------------
<div> with fixed height
---------------------------------------------------------
<div> with varaible height (takes all space that is left)
---------------------------------------------------------
<div> width fixed height
---------------------------------------------------------


how can I do that ?
Maybe someone has an example?

If you have Googled for three column CSS you would have found this:
http://www.pixy.cz/blogg/clanky/css-3col-layout/ .

However, I would go to http://www.w3schools.com and learn a little more
about HTML and start learning CSS.

 

[Robert Ludewig]

But that is three colums, I was float: doesn`t have top and bottom .... (I
need a three ROW layout)

 

[Neal]

(I
need a three ROW layout)

Then simply create consecutive divs.

Are you trying to achieve the bottom div happening at the bottom of the
page, or the bottom of the viewport? There's a difference. Bottom of the
page is simple, see above. Bottom of viewport, not so simple. We don't
know the height of the viewport. There's no way to tell the browser to
shove this div lower if there's space between it and the bottom chrome -
not reliably, anyhow.

 

[Robert Ludewig]

When using conscutive divs, how do I tell the middle one to use all space
available the lower and upper div (wich have fixed size) leave empty ???
height: 100% doesn't do the trick.

 

[rf]

Robert Ludewig

When using conscutive divs, how do I tell the middle one to use all space
available the lower and upper div (wich have fixed size) leave empty ???
height: 100% doesn't do the trick.

You don't. Why would you want to?

The content is as long as it is. If you need to make a middle div "fill up"
the canvas then your page must be very short.

 

[Robert Ludewig]

??

I try to acieve the following effect:


A div take 100% of the browsers window height.
- 100px at the top
- 100px at the bottom


no matter what the content of the div is

 

[Kris]

I try to acieve the following effect:


A div take 100% of the browsers window height.
- 100px at the top
- 100px at the bottom


no matter what the content of the div is

What is the reason for design if the content does not matter? Try a
different design philosophy: style content, don't pour content into
style. It will make you realize that a block of color of 100% height of
the browser canvas is almost irrelevant.

 

[Robert Ludewig]

The content will be text !

But I want the div behave the way I specified, no matter what text, and how
much of it is inside that div. Since the div serves as a frame (with custom
borders)

 

[WebcastMaker]

When using conscutive divs, how do I tell the middle one to use all space
available the lower and upper div (wich have fixed size) leave empty ???
height: 100% doesn't do the trick.

I seem to remember that you have to carry the height:100% in all of the
parent containers, all the way to body, then it works.

 

[WebcastMaker]

Robert Ludewig


You don't. Why would you want to?

Well one reason is aesthetics.

 

[rf]

WebcastMaker

Well one reason is aesthetics.

Then make another one of your bloody flash movies.

 

[WebcastMaker]

Then make another one of your bloody flash movies.

Hey speaking of that, we just picked up a huge contract with Siemens to
use our newest product, a Flash based training development tool, to
build on-line and CD based training. (So new, we have not added it to
the web site yet)

If your in Indianapolis (unlikely), you will be able to see the product
as it is being showcased at CDIEA (Custom Electronic Design and
Installation Association) expo in 2 weeks. We won't be there as we are
meeting with Turner Broadcasting training department about using it too.

Flash, not just silly movies anymore... (0_o)

 

[Karl Groves]

The content will be text !

But I want the div behave the way I specified, no matter what text, and how
much of it is inside that div. Since the div serves as a frame (with custom
borders)

Please show the common courtesy of quoting the relevant text to which you're
replying so that others who (unlike you) choose to search the group's
archives can glean something more useful than a few lines of text floating
out in space.

-Karl

 

[Martin Clark]

Adrienne wrote...

If you have Googled for three column CSS you would have found this:
http://www.pixy.cz/blogg/clanky/css-3col-layout/ .

I notice that this example includes "nesting" <div>s, as in:

<div id="main1"><div id="main2">
<div id="left"><div class="column-in">
<h4>Left Col</h4>
<p id="lccont">
Content......

Is this normal? What is the advantage of nesting the <div>s in this way?

 

[rf]

Adrienne wrote...
I notice that this example includes "nesting" <div>s, as in:

<div id="main1"><div id="main2">
<div id="left"><div class="column-in">
<h4>Left Col</h4>
<p id="lccont">
Content......

Is this normal?

Not usually. Well, yes, sometimes usually. Depends on the application.
Depends on the author.

What is the advantage of nesting the <div>s in this way?

Overkill? Div soup?

I have not studied this particular page in detail, although I have seen it
before. The reason is probably so the page *looks* like it is made out of
tables

This is not how I would produce a 3 column layout.