What CSS properties govern how a webpage reacts to window resizing?


Tags: html,css,design,resize

Problem :

I just wonder because I know that my page goes haywire if you try to make it too small. Facebook, StackOverflow and almost any other well programmed site calmly adjusts the page format until they run out of 'breathing room' at which point the page is just 'eaten' by the browser's borders. How do these well programmed sites format themselves so nicely as to cope with window resizing? Are there CSS properties specifically made to help with this?



Solution :

You should look into "Fluid" CSS designs. These are CSS rules that are designed to manage a pages width.

A common way of doing this is to use max-width and min-width to manage the over all width of the website.

For example:

Click here to see a live example.

<html>
<head>
    <title>Width Test</title>
    <style>
        #main-content {
            background-color: #EEF;
            border: 1px solid #003;
            max-width: 45em;
            min-width: 20em;
            padding: 1em;
            margin: 0 auto; /* center */
        }
        .box {
            border: 1px solid #000;
            background: #363;
            color: #fff;
            padding: .25em;
        }
        .left {
            float: left;
            margin: .5em 1em .5em 0;
        }
        .right {
            float: right;
            margin: .5em 0 .5em 1em;
        }
    </style>
    </head>
    <body>
        <div id="main-content">
            <p>Resize Me...</p>
            <span class="box left">left</span>
            <span class="box right">right</span>
            <p>Fluid Layout</p>
        </div>
    </body>
</html>

The key element here is the styling on #main-content. The rest of that is so you can see it in action.


    CSS Howto..

    How to add a box shadow to a table tr element upon hover? [duplicate]

    How to show an arrow down symbol with CSS

    How to scope efficiently javascript et css on a rails appliacation?

    How do I get this CSS/jQuery menu to open only on click, rather than hover?

    How to manage assets for modern/ancient browsers

    CSS triangle how to remove white space on the right

    How to make a central background over the page in HTML/CSS?

    Show/Hide H4's isn't working

    How to prevent CSS3 transform from make elements unclickable

    How to force Jade not to indent block tag?

    Bold text not showing on iPhone but displays fine on Android

    How to create a floating JavaScript Clock for UTC and Local Time?

    CSS how to automatically resize div size?

    How to prevent the vertical scroll of this div?

    How do I use Controller specific stylesheets in Rails 3.2.1?

    How to add and remove div's (input)

    Showing a demo of my CSS on any website

    how can I create overlay div to fit the rest of the screen

    How do CSS sprites work?

    How to avoid margin form ul in li tag?

    How do I create a cut-out hexagon shape?

    How to use css for the hover effect in another div?

    How to Link to Images in CSS file in RoR 3.2 Project?

    How to show a pointer on specific table with css and Twitter Bootstrap?

    How can I push the primefaces DefaultMenuModel before an accordion panel?

    Codeigniter shows views differently when index is removed

    How to change menu icon when scrolling to specific sections of the website?

    how to center a webpage in CSS

    how to do css changes only to links that are in side specific div without defining classes to a elements

    How to make the background image to fit into the whole page without repeating using plain css?