What is the mechanism that keeps various sections on page from being repositioned when browser resizes

Question

In this web site when you shrink the browser window the white space on the left and right disapear first, following by the shrinking of the right panel, followed by the main container panel. I have recently started to use ASP.NET MVC and in my test case my containers drop below the other containers as I resize the browser window. I am using a a site.master page with a left, center and right section as part of the body. It there an attribute in css that dictates the behavior or an HTML element? I have viewed the page source of this site's main page and looked at the CSS but nothing obvious has jumped out at me as how this is being controlled.

Thanks any help is always appreciated.

Answer 1

It can be a combination of float, position, and margin and how you set these elements up. Without a URL, it will be hard to say exactly what the problem is or how to fix it.

For a starting point, I would suggest taking a look at YUI CSS Grids or 960.gs (960 Grid System) and one of the various reset.css files floating around out there. YUI has a very good one. The reset.css file makes your css look and act the same in all browsers and the grid systems give you a starting point for designing your site. They also give you confidence that what you are designing will look and act the same in all browsers.

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

Answer 2

This is a html layout issue. Probaly the asp.net mvc layout is not very well done. Have a search for 'css column layout' on web there are plenty of examples on how to achieve a good layout. See for example In Search of the Holy Grail by MATTHEW LEVINE for a good discussion of a 3 column layout technique.

Answer 3

One of the great things about web development is that most often, when you see a site and think "How did they do that", it's very easy to look at the code and find out, and also to test it out - tools like Firebug for Firefox, the Developer Tools in IE 8 (F12) and Chrome will all display nicely formatted source and CSS, and will let you modify it in situ.

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

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

The key thing we're looking at here is that this class has a fixed width - 950 pixels, and the margins are set to (expanded):

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

Setting the left and right margins to "auto" has the affect of centering the div within the edges of it's container, and allowing them to expand to whatever width is needed once the container has taken up the required 950px.

Inside the container div, you then have a div with id "content" (no style rules), and then two divs: "mainbar" and "sidebar" whose styles are:

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

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

These left and right floats are what's positioning the bars in the right places.

Another handy CSS rule is:

clear

this can be set to "both", "left" or "right", and will basically reset the floats on the containers.

However, it sounds like you're after what is often called the "Holy Grail of CSS" (Rick points out that there's a bug in this with IE7, see here for a fix) for good reason: Three Columns, with at least one of them flexible.

Other examples, of completely flexible layouts include:

• Multi-column layouts climb out of the box
• Fluid grids