在调整浏览器大小时，如何防止div层重叠？

Question

I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.

Here's what it looks like:

Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div . My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.

How do I fix it so that my div s stay in place when the browser is resized?

Answer 1

as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div) eg

overflow:auto;

or

overflow:hidden;

Answer 2

I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.

Answer 3

Express your widths and font-sizes in ems. Here's a good calculator: http://riddle.pl/emcalc/

Percentages will work, too.

Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.

Answer 4

you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.

Answer 5

Can you post some of your CSS?

The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.

Answer 6

Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:

@media all and (max-width: 30em) {
  /* Alternative narrow styles */
}

or so:

<link media="all and (max-width: 30em)"
      rel="stylesheet" href="narrow.css" />

CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.

Answer 7

I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line

so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.