1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

wrapper div doesn't expand when Crtl +

content orientation goes BOOM if someone zooms out, in the browser.

         

trucqulent

11:57 pm on Apr 20, 2012 (gmt 0)

10+ Year Member



Hello,

This is my first post here at webmaster, so I'll try to provide an adequate description of the problem, but if I'm missing something please remind me.


basically when I use the control + mousewheel-V, the orientation of the height of wrapper div does not adjust. The bottom of the page will fill white, and the content div's will break format inside their container div.

So in short, I need to make the wrapper adjust vertically when someone zooms out, otherwise the entire page breaks format.

I understand there are probably two problems at work here, but primarily I'd like to address the wrapper first, then, if possible move on to the general orientation of the page.

below is a sample of the page:

HTML -


<HEAD>
<TITLE> Divs in HTML and CSS </TITLE>
<META charset="utf-8" />
<META name="keywords" content="" />
<META name="description" content="" />
<link rel="stylesheet" href="csshome.css" type="text/css"/>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
hight: 100%;
}
-->
</style>
</HEAD>
<BODY>



<div id="wrapper">

<div id="header">This is the header and main menu</div>



CSS -

#wrapper {

width: 100%;
height: 100%;
border-style: solid;
border-width: thin;
background: #6C6C73


}


NOTE- Im pretty new to web dev. This is my first server, and my first self built site from scratch so please be gentle!

Paul_o_b

2:35 pm on Apr 21, 2012 (gmt 0)

10+ Year Member



Hi,

The first thing I need to ask is why do you need the wrapper at 100% high?

If you just wanted a background colour then apply it to the body instead.

If you have valid reasons for a 100% high wrapper then use min-height:100% instead of height:100% and then the wrapper will expand when text or content requires it to do so.

You can't however add a top and bottom border to the wrapper because that would make it 1px + 100% + 1px tall which is too tall for the initial viewport. 


html, body {
height:100%;
margin:0;
padding:0
}
#wrapper { min-height:100% }
* html #wrapper { height:100% }/* for ie6 which treats height as min-height anyway */


If you wanted it bordered then you could add side borders as you don't need a width. For the top border you could place that on the header. For the bottom border you could place that on the wrapper but offset it with a negative margin.

e.g. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html, body {
height:100%;
margin:0;
padding:0
}
#wrapper {
min-height:100%;
border:2px solid red;
background:#ccc;
border-top:none;
margin-top:-2px;
}
* html #wrapper { height:100% }/* for ie6 which treats height as min-height anyway */
#header { border-top:4px solid red; }
</style>
</head>

<body>
<div id="wrapper">
 <div id="header"></div>
</div>
</body>
</html>




(Note you also spelled height incorrectly in your body rule.)

trucqulent

4:55 pm on Apr 21, 2012 (gmt 0)

10+ Year Member



Thank you for your reply.

I've gone ahead and removed the wrapper, as there was really no functional purpose to it. This seems to have addressed the background problem. However, When I scroll to the bottom of the page, the footer seems has about a 30px margin below it. Furthermore, it remains relative to page instead of adjusting to the very bottom.

</BODY>

<div id="Footer">This is the footer>
<div class="footer">
</div>
</HTML>


#Footer {
width: auto;
height: 180px;
background-color: #2B2A2B;
bottom: 0px;


I've broken the code down to its simplest form. At this point, Im just trying to keep the foot at the bottom with no bottom margin, however Im trying to avoid a position: fixed; as the footer is expected to be fairly large (about 300px high.

Paul_o_b

9:09 am on Apr 22, 2012 (gmt 0)

10+ Year Member



Hi,

This seems to be a completely different question to the first one you asked so I am a little confused as to your exact needs now.

If you are looking for a "sticky footer" then that is a different kettle of fish altogether and requires that you have a fixed height footer.

The technique is similar to the one I have given you above except that you would need a negative top margin of 300px to bring the 300px footer in to view. Then you would need a 300px soak up on the header using the border trick I showed above (300px top border).

Here is the full code which is commented in detail so take attention of all the details as they are critical. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
margin:0;/* must clear defaults or 100% will be too large */
padding:0;/* "" */
}
h1, h2, p {
padding:0 10px;
margin:0 0 1em
}
#outer {
width:760px;
background:#ffc;
margin:auto;
min-height:100%;
margin-top:-300px;/*footer height - this drags the outer 300px up through the top of the monitor */
text-align:left;
clear:both;
}
* html #outer { height:100% }/* for ie6 as it doesn't understand min-height but treats height as a minimum */
#header {
background:red;
border-top:300px solid #fff; /* soak up negative margin and allows header to start at top of page and not above it*/
}
#footer {/* footer now sits at bottom of window*/
background:red;
width:760px;
margin:auto;
height:300px;/* must match negative margin of #outer and must be a fixed height*/
clear:both;
}
/*Opera Fix*/
body:before {/* cures the sticky bug in opera where the footer doesn't re-position after window resize*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* - negate effect of float*/
}
#outer:after {/*overflow hidden would kill opera so we use this method of float clearing*/
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>Sticky Footer</h1>
</div>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>




However, I would not use this method for a 300px high footer as that is too tall and in a fluid layout would break if text was fluid.

If your problem was simply that there was a gap under your footer then that would be because you didn't remove the padding and margin from html and body.

trucqulent

7:14 pm on Apr 22, 2012 (gmt 0)

10+ Year Member



Thanks again,

"*footer height - this drags the outer 300px up through the top of the monitor */"

I was totally unaware of that concept, and still am. In the end, actually wiped out my entire page, copied your html/css, and just added in the divs/menus/css sheets/images and now everything is working.

If I zoom all the way out using the ctrl-mousewheel function, the origional problem still persists, but at least now the footer and header are where they should be.



Is there a "Quality" resource you can direct me to, where I can really learn the essence of positioning?

I thought I was learning at a decent pace, but It's proven a challenge to find anything more then the most basic of basic information.

(when I say "basic of basic", I mean for example: This is a div tag - <div> </div>.)

Thanks again for all your help. It's really has made a difference.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026