How do I prevent my div layers from overlapping when the browser is resized?

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: http://img.photobucket.com/albums/v703/dollyshots/example.jpg

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 with 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 divs stay in place when the browser is resized? Some help would be very much appreciated.

Answer 1

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 2

Hi rebecca, 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) e.g.

overflow:auto;

or

overflow:hidden;

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

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 5

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 6

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