Overlapping divs in liquid layout - CSS [closed] - css

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
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.

Answer 2

Without the corresponding HTML it is hard to tell. But let me do a guess. As you align many elements using "float" and "width: 100%" they are not in the text-flow anymore. Therefore they might not resize with the rest of the page. On some elements it might be useful to make the use "display: inline-block" instead of "float".

Answer 3

Really I would suggest that you just use a 3 column fixed width layout. Stretching those divs is not going to look good and will make things render weird. Try wrapping the whole site in a wrapper div and then centering it. That way you wont have to deal with the craziness of stretching divs.
div#wrapper{
margin: 0 auto; // this will make everything center automatically.
width: 960px;
}
Sorry to not answer your question but to suggest a different solution. I am just not a fan of liquid layouts.

Answer 4

You make the two outer columns a static width and make the center a percentage. You can also use a percentages for the left, right margins as well.