how to prevent webpage layout destruction

I have a webpage with the following layout: http://jsfiddle.net/h9Nn3/6/ and it looks exactly like I want it to as long as the user's browser is wide enough (over 700px or so) but if it is thinner than that it starts to get all jumbled up and if the browser is only half the screen which somewhat normal then it looks terrible. What would the best way to fix this be?

I think the best thing would be if the items simply moved down as opposed to overlapping.

Answers


You can use min-width, as @anjunatl pointed out, or you can use CSS3 media queries.

They let you tweak the CSS for any resolution range you want:

body {
  color: red;
}

@media screen and (max-width: 700px) {
  body {
    color: blue;
  }
}

When the user's browser is less than 700px wide, the new CSS is put into effect and overrides the old CSS. You can use this to your advantage and basically fix any bugs you find with the website by adding new rules into the media query block. That way, they only show up and fix the layout at the right resolution.


Add this CSS to the body tag: min-width: 700px;


Need Your Help

How to copy a div's content to clipboard without flash

javascript jquery html copy

That's it :) I have a div with the id #toCopy, and a button with the id #copy.

Multiple applications and single web.config

asp.net web-applications web-config machine.config

Is it possible to have single web.config file for multiple asp.net web applications?