Question

So here’s my problem. I am using a liquid layout on my page, so that the site always fits the width of the window. works perfectly, sounds great, right? the problem that i’m having is that whenever the window is resized, the divs start moving, overlapping, and wrapping to the next line.

here’s my site, so you can see what i am talking about: http://www.kaiserroof.com/test/index2.html

i’m somewhat new to css design. i’m sure there is an easy fix, but i can’t figure it out. can someone help me? (soon, please. i’m so ready to be done with this website 🙂 ) Here is my CSS code:

html {
 padding: 0px;
 margin: 0px;
 width: 100%;
 position: static;
 border-collapse: collapse;
 overflow-x: hidden;
}
body {
 padding: 0px;
 margin: 0px;
 width: 100%;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 14px;
 color: #555;
 font-weight: 100;
 line-height: 18px;
}
#container {
 padding: 0px;
 margin: 0px;
 width: 100%;
 min-width: 600px;
 background: #eeeeee;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 14px;
 color: #555;
 font-weight: 100;
 line-height: 18px;
}
#row1 {
 width: 100%;
 float: left;
 background: #eeeeee;
}
#row2 {
 width: 100%;
 float: left;
}
#row3 {
 width: 100%;
 float: left;
 padding-top: 300px;
}
#row4 {
 width: 100%;
 float: left;
}
#row5 {
 width: 100%;
 float: left;
}
#logo {
 float: left;
 width: 13.5%;
}
#phone1 {
 width: 85%;
 float: left;
 text-align: right;
}
#phone2 {
 width: 79%;
 padding-right: 6%;
 float: left;
 height: 54px;
 text-align: right;
 vertical-align: top;
}
#buttonmenu {
 width: 86.5%;
 float: left;
 border: none;
 margin: 0px;
 padding: 0px;
 border-collapse: collapse;
 border-spacing: 0;
}
#backgroundleft {
 float: left;
 position: absolute;
 z-index: 1;
}
#intro {
 float: left;
 position: absolute;
 z-index: 2;
 padding-left: 15.5%;
}
#form {
 width: 34.5%;
 float: left;
 border-style: solid;
 border-width: 1px;
 border-color: #000;
 border-top-style: none;
 border-left-style: none;
 padding-bottom: 76px;
}
#estimates {
 padding-left: 20px;
 padding-top: 10px;
 padding-bottom: 20px;
}
#form1 {
 padding-left: 20px;
}
#welcome {
 width: 34.75%;
 float: left;
 border-style: solid;
 border-width: 1px;
 border-color: #000;
 border-top-style: none;
 border-left-style: none;
 border-right-style: none;
 text-align: center;
 padding-top: 10px;
}
#linksright {
 width: 30.5%;
 float: left;
 border-style: solid;
 border-width: 1px;
 border-color: #000;
 border-top-style: none;
 border-right-style: none;
 text-align: right;
 padding-top: 10px;
 padding-bottom: 92px;
}
#bottomleft {
 width: 23%;
 float: left;
 padding-left: 50px;
 padding-top: 10px;
}
#bottommiddle {
 width: 50%;
 float: left;
 padding-top: 10px;
 text-align: center;
}
#bottomright {
 width: 20%;
 float: left;
}
td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: #BBBBBB;
}
a {
 text-decoration: none;
 color:#000;
 line-height: 20px;
}
A:hover { 
 text-decoration: underline;
 color: #000 
} 
.alternate {
 padding-right: 20px;
}
.object { 
 outline: none;
}
#object { 
 outline: none;
 margin: 0; 
  display: block; 
}

Answer 1

Some things just can’t be wrapped onto a new line, such as form elements. You can hide the problem by setting a min-width on each of those columns (#form, #welcome, #linksright), so they won’t shrink down past a certain point. Or a larger single min-width on #container, since 600px obviously isn’t enough to keep stuff from overlapping.