div height issue

M

mark.olszowka

My Goal

Creat a page consisting of a floating, centered, content section whose
background is a different color than the background of the page itself

this content section should extend to the bottom of the browser window,
or to the bottom of the content residing within the content section,
whichever is greater.

the page needs to display/behave correctly in IE, FireFox, Opera, and
Netscape (i would settle for IE and FireFox).

the test page markup is included below

the page, as it is currently coded, works fine in IE, but not in
FireFox, Opera, or Netscape.

To see issue in other browsers, do the following

make browser window smaller than content so scrollbars appear
refresh page
scroll down page using scrollbars
you should see center content color end

if you resize browser window, page/content displays correctly


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
html
{
height: 100%;
}
body {
height: 100%;
margin:0;
}
#txt
{
background-color: lime;
width: 600px;
margin: auto;
height: 100%;
}
</style>
</head>
<body>
<div id="txt">
<table>
<tr><td>1000</td></tr>
<tr><td>2000</td></tr>
<tr><td>3000</td></tr>
<tr><td>4000</td></tr>
<tr><td>5000</td></tr>
<tr><td>6000</td></tr>
<tr><td>7000</td></tr>
<tr><td>1000</td></tr>
<tr><td>2000</td></tr>
<tr><td>3000</td></tr>
<tr><td>4000</td></tr>
<tr><td>5000</td></tr>
<tr><td>6000</td></tr>
<tr><td>7000</td></tr>
</table>
</div>
</body>
</html>

Does anybody know how to accomplish this task?

I have tried different combinations of height and
min-height/max-height, but to no avail.

Thanks
 
B

BootNic

[email protected] said:
My Goal

Creat a page consisting of a floating, centered, content section
whose background is a different color than the background of the
page itself

this content section should extend to the bottom of the browser
window, or to the bottom of the content residing within the content
section, whichever is greater.

the page needs to display/behave correctly in IE, FireFox, Opera,
and Netscape (i would settle for IE and FireFox).

the test page markup is included below

the page, as it is currently coded, works fine in IE, but not in
FireFox, Opera, or Netscape.

To see issue in other browsers, do the following

make browser window smaller than content so scrollbars appear
refresh page scroll down page using scrollbars you should see
center content color end

if you resize browser window, page/content displays correctly

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css"> html { height: 100%; } body { height: 100%;
margin:0; } #txt { background-color: lime; width: 600px; margin:
auto; height: 100%; } </style> </head>
<body>
<div id="txt">
Click to expand...
<table>
<tr><td>1000</td></tr>
<tr><td>2000</td></tr>
<tr><td>3000</td></tr>
<tr><td>4000</td></tr>
<tr><td>5000</td></tr>
<tr><td>6000</td></tr>
<tr><td>7000</td></tr>
<tr><td>1000</td></tr>
<tr><td>2000</td></tr>
<tr><td>3000</td></tr>
<tr><td>4000</td></tr>
<tr><td>5000</td></tr>
<tr><td>6000</td></tr>
<tr><td>7000</td></tr>

</table>
Click to expand...
</div> </body> </html>

Does anybody know how to accomplish this task?
Click to expand...
[snip]

Wrap the table in a div and set the background color to inherit.
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
My Goal

Creat a page consisting of a floating, centered, content section whose
background is a different color than the background of the page itself
Click to expand...

What you're basically talking about is the vertical centering of small
content. As far as I know, there is no way to do this absolutely
perfectly in the 3 currently most-popular browsers using the same
markup, especially under the auspices of the existing standards, but one
can get close.

The best I've come up with so far is at:

http://www.neredbojias.com/zexae/vcscex.html

Notice there is no doctype, and there shouldn't be.

Now, if you want the inner container to extend to 100% height (re.
background) even with lesser content, you will probably have to use
another table, which gets hairy. But experiment. That's how solutions
are discovered.
 
M

mark.olszowka

I should have clarified that the center section need only be
horizontally centered, not vertically centered.

And yes the inner container needs to extend all the way to the bottom
of the "browser window", regardless of the actual size of the content.

And yes, I have been experimenting for 3 days now without success.
That's when I decided that further experimentation on my part was
futile without first getting feedback from individuals on this group.

(still have yet to find the markup that works)
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
I should have clarified that the center section need only be
horizontally centered, not vertically centered.

And yes the inner container needs to extend all the way to the bottom
of the "browser window", regardless of the actual size of the content.

And yes, I have been experimenting for 3 days now without success.
That's when I decided that further experimentation on my part was
futile without first getting feedback from individuals on this group.

(still have yet to find the markup that works)
Click to expand...

Hmm, I believe that is relatively straight-forward with css:

table {
margin:auto;
height:100%;
background:huckleberry;
}
 
M

mark.olszowka

that seemed to do the trick...

i was trying to avoid tables to accomplish this effect (despite the
fact that my sample had a table in it...mere coincidence)

i wanted to stick with using div's, but from everything I have read so
far, this is impossible under the current standards.

anyway, the table solution you provided is a viable "workaround" for my
current problem.

thanks for your help!
 
N

Neredbojias

With neither quill nor qualm, (e-mail address removed) quothed:
that seemed to do the trick...

i was trying to avoid tables to accomplish this effect (despite the
fact that my sample had a table in it...mere coincidence)
Click to expand...

I know what you're saying, but divs don't expand with content (-except
in IE which is wrong) as defined by the current standards.
i wanted to stick with using div's, but from everything I have read so
far, this is impossible under the current standards.
Click to expand...

Tables are okay if not used unnecessarily, and sometimes they are
necessary.
anyway, the table solution you provided is a viable "workaround" for my
current problem.

thanks for your help!
Click to expand...

'Welcome.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Javascript DOM 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Help needed with thank you message 5
Can anyone please help? HTML - two tables applying different styles 4
SendGrid email issue in responsive Gmail 1
Image shifts to the right when export the page to pdf 4
Having trouble centering contents of td ? 3

Members online

No members online now.
Total: 32 (members: 2, guests: 30)
Robots: 218

Forum statistics

Threads
473,767
Messages
2,569,570
Members
45,045
Latest member
DRCM

Latest Threads

Top