Web page Breakdown resizing browser window?

[windy]

Hello,

I find when resizing browser window my web page breaks down. When I view and resize other work the window appears to hide the page, not causing it to break apart. What settings would help to control this? I have added some of what I think would be important code.

html {
margin: 0px;
padding: 0px;
height: 100%;
}

body {
font-family: Verdana;
font-size: 12px;
color: #666;
background-color: #fff;
margin: 0px;
padding: 0px;
}

#topShelf {
display: block;
width: 100%;
margin: 0;
padding: 0;
border-top: 2px solid #888;
border-bottom: 5px solid #100100;
background: #bbb url('d23.png') no-repeat scroll 70% 50%;
}

#wrapper {
width: 986px;
margin: 0;
padding: 0px;
}

#column1 {
float: left;
width: 20%;
margin: 0;
padding: .5em 0 0 10px;
}

#column2 {
float: left;
width: 40%;
margin: 0;
padding: .5em 0 0 10px;
}

#column3 {
float: left;
width: 30%;
margin: 0px;
padding: .5em 0 0 10px;
}

#column4 {
float: left;
width: 10%;
margin: 0px;
padding: 5px 0 0 5px;
}

#footer {
clear: both;
width: 100%;
margin: 0;
padding: 0;
text-indent: 2.14em;
border-top: 1px dotted #999;
}

#footer h6 {
text-align: right;
padding-right: 10px;
}

[drhowarddrfine]

When you use ems and percent for widths, everything is relative to something else. Percent is relative to the previously positioned parent and ems are in relation to the font size. When you mix them, you may find some things don't change the way you want. In any case, it can be a balancing act as the browser is resized.

[AricC]

When you use ems and percent for widths, everything is relative to something else. Percent is relative to the previously positioned parent and ems are in relation to the font size. When you mix them, you may find some things don't change the way you want. In any case, it can be a balancing act as the browser is resized.

Like Doc said you are giving some elements fixed widths and some percentages. If you want everything to resize just use percentages.