By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,665 Members | 1,258 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,665 IT Pros & Developers. It's quick & easy.

Firefox, will not auto resize container height: 100%, bottom margin is lost!

tusovka
P: 23
I have a container and 4 divís inside it. My container is stretched to fill the entire window. In IE, if you resize the window all the content resizes correctly, with all 4 margins around the container visible. Iím trying to get the same behavior in FF, yet I canít seem to find the right CSS recipe.

Note, if you past the HTML and CSS code and examine the behavior in the IE, Iím trying to achieve the same behavior in FF.

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="utf-8">
  7.     <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
  8.     <meta name="created" content="Fri, 08 Oct 2010 19:29:03 GMT">
  9.     <meta name="description" content="">
  10.     <meta name="keywords" content="">
  11.     <title>IE AutoResize</title>
  12.  
  13.  
  14. <style type="text/css" media="screen">
  15.  
  16. html {
  17.      height:100%;
  18.      width:100%;
  19.      overflow: hidden;
  20.      margin-bottom:40px;
  21. }
  22.  
  23. body {
  24.      height:100%;
  25.  
  26.      margin-top: 10px;
  27.      margin-left: 10px;
  28.      margin-right: 10px;
  29.  
  30. }
  31.  
  32. #cotainer {
  33.      background-color:#808080;
  34.      height: 100%;
  35.      Valignment-adjust: central;
  36.      padding: 10px 10px 10px 10px;
  37. }
  38.  
  39. #top {
  40.      background-color:#00FF80;
  41.      height: 10%;
  42. }
  43.  
  44. #left {
  45.      background-color:#FF8000;
  46.      float:left;
  47.      width: 20%;
  48.      height:80%;
  49. }
  50.  
  51. #right {
  52.      background-color:#3944C6;
  53.      width: 80%;
  54.      height:80%;
  55.      float:right;
  56. }
  57.  
  58. #bottom {
  59.      clear:both;
  60.      background-color:#FF0000;
  61.      height: 10%;
  62. }
  63. </style>
  64.  
  65.  
  66.  
  67.   </head>
  68.   <body>
  69.  
  70.      <div id="cotainer">
  71.            <div id="top">top</div>
  72.            <div id="left">left</div>
  73.            <div id="right">right</div>
  74.            <div id="bottom">bottom</div>
  75.      </div>
  76.  
  77.  
  78.  
  79.   </body>
  80. </html>
  81.  
  82.  
Oct 11 '10 #1
Share this Question
Share on Google+
11 Replies


Death Slaught
100+
P: 1,137
I don't see the resizing issue you're talking about. What do you mean 4 margins? You only have 3 listed in your CSS.

Also, please keep in mind that you have the overflow property set to hidden. So any bottom margin you add will not display.


Thanks, Death
Oct 11 '10 #2

tusovka
P: 23
In firefox, left, top and right margins are displayed. Yet the bottom margin is not. I tried setting the bottom margin in different area's like html, body, container, etc.

I have set the overflow: hidden because the container should automatically re-size and no scroll is needed. In IE this looks and works great.

Basically, I want to have a container div have 4 10px margins all around. When you re-size the window the content should shrink/expand but the 10px margin should remain constant around the container div.


# html {
# height:100%;
# width:100%;
# overflow: hidden;
# margin-bottom:40px;
# }
Oct 11 '10 #3

Death Slaught
100+
P: 1,137
The bottom margin isn't being displayed because of the overflow property. Move it to your #container rule and it should work.

Expand|Select|Wrap|Line Numbers
  1. #cotainer {
  2.      background-color:#808080;
  3.      height: 100%;
  4.      Valignment-adjust: central;
  5.      padding: 10px 10px 10px 10px;
  6.      overflow: hidden;
  7. }

Thanks, Death
Oct 11 '10 #4

tusovka
P: 23
Notice, I added the overflow to the container, I also had to move the margin-bottom to the container as well.
Now, we made some progress, yet no cigar :)

The bottom margin is visible now, but I have the scroll bar again, it seem like the container is just a little to big, which causes the scroll to appear.

I have also tried to change the height of html, body, and container. Basically, it will work for only one screen size, if you re-size the window the numbers don't make sense.

Any thoughts?

Expand|Select|Wrap|Line Numbers
  1. html {
  2.      height:100%;
  3.      width:100%;
  4. }
  5.  
  6. body {
  7.      height:100%;
  8.      margin-top: 10px;
  9.      margin-left: 10px;
  10.      margin-right: 10px;
  11. }
  12.  
  13. #container {
  14.      background-color:#808080;
  15.      height: 100%;
  16.      alignment-adjust: central;
  17.      padding: 10px 10px 10px 10px;
  18.      overflow: hidden;
  19.      margin-bottom: 10px;
  20. }
  21.  
  22.  
  23.  
Oct 11 '10 #5

Death Slaught
100+
P: 1,137
My apologies, I'm working on a Google Chrome extension and was just glancing at your code.

Revert back to your original code and try changing the body's height property to 94%. That should remove the scroll bar when viewed in a maximized browser. Are you trying to make the page display without any scroll bars in the smallest possible window size?


Thanks, Death
Oct 12 '10 #6

tusovka
P: 23
I have tired manipulating the height's of html, body, container. Basically, if one could make it work for one size but if you shrink to a netbook size monitor the bottom margin is gone.


"Are you trying to make the page display without any scroll bars in the smallest possible window size?"

Yes

Both max size and min size.

Thanks for the help.
Oct 12 '10 #7

Death Slaught
100+
P: 1,137
Oh, just change the margin and padding property values from pixels to percentages.

Expand|Select|Wrap|Line Numbers
  1. html {
  2.      height:100%;
  3.      width: 100%;
  4.      overflow: hidden;
  5.  
  6.  
  7. body {
  8.      height:94%; 
  9.      margin-top:1%;
  10.      margin-left: 1%;
  11.      margin-right: 1%;
  12.      margin-bottom: 1%;
  13.  
  14. }
  15.  
  16. #cotainer {
  17.      background-color:#808080;
  18.      height: 100%;
  19.      Valignment-adjust: central;
  20.      padding: 1% 1% 1% 1%;
  21. }

1% sounds like it will look about the same as 10px.


No Problem, this should do the trick.
Oct 12 '10 #8

drhowarddrfine
Expert 5K+
P: 7,435
Never, ever, ever use IE as a reference for how things should work. It is inept at best, 12 years behind all others in modern standards and compliance, it is an embarrassment to Microsoft.

Always, always use a modern browser -- ANYTHING but IE -- to initially test your markup. Then and only then look at how IE screws things up, but the hacks to fix IE are well known as are the multitude of bugs.
Oct 12 '10 #9

drhowarddrfine
Expert 5K+
P: 7,435
I'm editing this list as I go along.

1) You can't give html a margin because html is the total viewport.
2) You give the body 100% height but body has a built-in margin and padding which is what is pushing the body tag off the bottom.
3) There is no such thing as 'valignment-adjust' in CSS
4) Which version of IE are you using? IE6 does not work like IE7 which doesn't work like IE8 which won't work like IE9 and none of them work like any other far more modern browser.
5) Warning: HTML5 works in any modern browser. HTML5 is not recognized in any version of IE.
6) Never, ever trust IE to do ANYTHING right.
Oct 12 '10 #10

tusovka
P: 23
IE version 8.0.6

I agree with you that IE sucks but I'm required to support IE and FF. That been said, what are your suggestions as far as coding goes.

I'm trying to create a container which will fill the screen completely even if the content does not require that much space but the container must maintain a 10px or 1% margin/padding whatever achieves a small outer white area between the container and the outer edge of the browser.

Thanks for the input.
Oct 12 '10 #11

drhowarddrfine
Expert 5K+
P: 7,435
Nowhere did I say not to support IE. I said not to trust it or use it as a ref for how things work. If it works in IE, but not other browsers, then your markup is wrong!

Busy day today. I'll try and get back later.
Oct 12 '10 #12

Post your reply

Sign in to post your reply or Sign up for a free account.