Home/ Questions/Q 174457
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T13:31:32+00:00

In this web site when you shrink the browser window the white space on

  • 0

In this web site when you shrink the browser window the white space on the left and right disappear 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. 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:

    • 0