What is the mechanism that makes different sections of a page move when the browser is resized

Question

On this website, when you shorten the browser window, the empty space on the left and right disappears first, after which the right panel is reduced, and then the main panel of the container. I recently started using ASP.NET MVC, and in my test case, my containers drop below other containers when I resize the browser window. I use the site.master page with the left, center and right side as part of the body. Is there an attribute in css that dictates a behavior or HTML element? I looked at the source of the page on this main page of the site and looked at CSS, but nothing obvious jumped at me as it is controlled.

Answer 1

One of the great features of web development is that most often when you see a site and think, “How did they do it,” it’s very easy to look at the code and find out, as well as check it - tools like Firebug for Firefox, tools developers in IE 8 (F12) and Chrome will display well-formatted source and CSS and will let you change it in place.

In the case of SO, the main site object is contained in a div with the class "container", the style rules for "container" are:

.container {
  margin: 0 auto;
  text-align: left;
  width: 950px;
}

The key value that we are considering here is that this class has a fixed width of 950 pixels, and the fields are set (expanded):

margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

"" div , 950px.

div div id "content" ( ), div: "mainbar" "sidebar", :

#mainbar {
  float: left;
  margin-bottom: 40px;
  width: 715px;
}

#sidebar {
  float: right;
  width: 220px; /* this is also set in the "style" attribute *
}

- , .

CSS:

clear

"", "" "", reset .

, , , " Holy Grail of CSS" ( , IE7, . ) : , .

:

Answer 2

float, position margin . URL- , .

YUI CSS Grids 960.gs(960 Grid System) reset.css , . YII . reset.css css , . , , , .

http://developer.yahoo.com/yui/grids/ http://960.gs/

Answer 3

This is a html build issue. The failures of the asp.net mvc layout are not very well made. Try to find a “CSS column layout” on a website, there are many examples of how to achieve a good layout. See For example, Looking for the Holy Grail of MATTHEW LEVINE for a good discussion of the three-column layout method.