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 center checkbox vertically in a table-cell?

    How do I edit the CSS of the Html.DisplayFor method in MVC 3?

    How do I set my ul's margin after setting every padding and margin to zero in CSS? [closed]

    Tab content not showing up

    How can I show an absolutely positioned div inside a fixed positioned div?

    How to NOT select only specific elements in a table with jQuery?

    how to Design a vista like button using CSS

    CSS: How to get rid of the extra space of first line of a paragraph?

    How to position 3 images in two equal height columns?

    Navbar doesn't scroll to show links on smaller devices when using nicescroll plug-in

    Browser sizing Ctrl +/- :: How to manipulate settings?

    how to fix buttons on the CSS box

    How to develop two different menu bars for a website (one for all users, and the other one for the Admin) in ASP.NET webfroms?

    How do I use pseudo-classes to select all children except first and last?

    How to attach click event to a css styled checkbox

    How to make a full page header?

    How to align text and buttons next to canvas (WebGL + JavaScript + CSS)

    How to set width of DIV to span with text inside it (so not fixed)

    How to get a smooth sine wave alternation with Javascript/JQuery CSS

    How to position element as fixed in relatively positioned container?

    How to fix “Blocked loading mixed active content” for css and js over https

    How do I keep an element scaled in CSS3 in-till mouseleave? Then on mouseleave scale the element back to it's original size

    How to write css for fixed header and scrollable table

    How can I use jQuery to hide or show table rows based on asp.net role?

    How to force div element to keep its contents inside container

    CSS Problem: How to make the images in a made of images touch vertically?
    .game td img { display: block; } Images come with their own white space...
    Read more

    How to edit 'clip' CSS property in JQuery?

    How to hide specific TD borders in a TABLE using CSS

    How to force child element adherence to `flex: nowrap;` CSS directives

    how do I properly position & scale these elements in CSS?