Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > div height issue

Reply
Thread Tools

div height issue

 
 
mark.olszowka@gmail.com
Guest
Posts: n/a
 
      01-20-2006
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

 
Reply With Quote
 
 
 
 
BootNic
Guest
Posts: n/a
 
      01-21-2006
> "(E-Mail Removed)" <(E-Mail Removed)> wrote:
> news:(E-Mail Removed) ups.com....
>
> 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">

<div style="background-color: inherit;">
> <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>
> </div> </body> </html>
>
> Does anybody know how to accomplish this task?
>

[snip]

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

--
BootNic Friday, January 20, 2006 8:06 PM

A well-developed sense of humor is the pole that adds balance to your step as you walk the tightrope of life
*William Arthur Ward*

 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      01-21-2006
With neither quill nor qualm, http://www.velocityreviews.com/forums/(E-Mail 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


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.

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
mark.olszowka@gmail.com
Guest
Posts: n/a
 
      01-23-2006
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)

 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      01-23-2006
With neither quill nor qualm, (E-Mail 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)


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

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

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
mark.olszowka@gmail.com
Guest
Posts: n/a
 
      01-23-2006
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!

 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      01-24-2006
With neither quill nor qualm, (E-Mail 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)


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.


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!


'Welcome.

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Div Height = Image height. help muggslab HTML 1 02-01-2010 07:41 PM
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
child div blocks parent div, height problem... HJ HTML 5 09-01-2006 04:37 PM
Change height of DIV when div border set marco_giuliani_it@hotmail.com Javascript 0 09-21-2005 02:42 PM
How to tell height of div where height is not set? Don Vaillancourt Javascript 8 01-31-2005 11:32 AM



Advertisments