There have been many-a-programmer who needed to set up their layouts with flexibility standards. This article will demonstrate the three different types of CSS-based layouts and how to flex the certain part of the webpage body.
Below each snippet of code is an example displaying the presented code. If you notice, there are two images; one of which is in a 800px environment (for the minimum standard for screens), and the other is in a 650px environment (to demonstrate the flexibility when the window has been sized down). These demonstrations appear the exact same in Internet Explorer, Firefox, and Safari
If you would like to keep your centered content the same with (say, 720px to allow for spacers), then you can use the below example to make the sides flex with the screen. If you copy-and-paste the below example and try to change the window width, you will see what I mean. The content in the middle stays constant and the sides change based on the size of the window. This is beneficial for people who are designing for large and wide screens, and who want to keep their content the same (or have a specific version of your layout that wouldn't like to change based on the size; that's below).
<html>
<head>
<title>Test CSS</title>
<style type='text/css'>
body, html{ margin: 0; padding: 0; }
#body{
border: 2px #f00 solid;
text-align: center;
margin: 0;
padding: 0;
}
#container{
border: 1px #00f solid;
margin: auto;
width: 600px;
text-align: left;
}
</style>
</head>
<body>
<div id='body'>
<div id='container'>
Hello World!
</div>
</div>
</body>
</html>
If for some reason you want to keep the side spacers the same width and flex the center, this can also be achieved. By changing the width of the centered content to 100% and putting a set padding on the left and right of your wrapper div, you can easily achieve this goal. If you copy-and-paste this example, notice how the center changes with the size of the window meanwhile the sides stay the same width.
<html>
<head>
<title>Test CSS</title>
<style type='text/css'>
body, html{ margin: 0; padding: 0; }
#body{
border: 2px #fc0 solid;
text-align: center;
margin: 0;
padding: 0;
padding-left: 50px;
padding-right: 50px;
}
#container{
border: 1px #ff0 solid;
width: 100%;
text-align: left;
}
</style>
</head>
<body>
<div id='body'>
<div id='container'>
Hello World!
</div>
</div>
</body>
</html>
If you are really advanced and know how to work your CSS, then try the example below. This is only to be used for people who know how to design flexible and fluid layouts with CSS and like to stay constant with their environments. The only difference between this example and the example above is that the px for the padding in the wrapper div has changed to a %. This example allows both the center content and the spaced sides to change based on the size of the window. The sides will change based on a percentage (which is noted in the code) and the center will change based on the percentage of the sides.
<html>
<head>
<title>Test CSS</title>
<style type='text/css'>
body, html{ margin: 0; padding: 0; }
#body{
border: 2px #3c0 solid;
text-align: center;
margin: 0;
padding: 0;
padding-left: 5%;
padding-right: 5%;
}
#container{
border: 1px #30c solid;
width: 100%;
text-align: left;
}
</style>
</head>
<body>
<div id='body'>
<div id='container'>
Hello World!
</div>
</div>
</body>
</html>
Side Notes:
<body> and <div id='body'>?
<body> is the HTML structured body, and the body div is the “wrapper” div for the page. It is good to have a “wrapper” div so that you can set the overall settings for the page, and not have to go off of <body> (because not all browsers like that)body and html?
position: absolute; top: 0; left: 0;, but I like this way better). Also, while Firefox and Safari like the body element, IE likes the html (so both are included to satisfy all environments). For more details, see the Set to Top Left article.div's have borders?