Overlapping Divs In Liquid Layout - Css

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 havi

Solution 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.

Solution 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".

Solution 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.

Solution 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.