GRC: Layout (Fixed or Liquid)

Fixed Layout
A fixed layout, or fixed-width layout, is just that: a layout in which the body of the page is set to a specific width. That width is typically controlled by a master “wrapper” <div> in which all content is contained. The width property of that <div> would be set in the style attribute or in a style sheet entry if the <div> was given an ID value such as “main” or “wrapper” (although the name is up to you).

A main reason for creating a fixed-width layout is so that you can have precise control over the appearance of the content area. However, if users visit your fixed-width site with smaller or much larger screen resolutions than the resolution you had in mind while you designed it, they might encounter scrollbars (if their resolution is smaller) or a large amount of empty space (if their resolution is greater).

There is another consideration when creating a fixed-width layout: whether to place the content flush-left or whether to center it. Placing the content flush-left produces extra space on the right side only; centering the content area creates extra space on both sides.

Liquid Layout

A liquid layout—also called a fluid layout—is one in which the body of the page does not use a specified width in pixels, although it might be enclosed in a master “wrapper” <div> that uses a percentage width. The idea behind the liquid layout is that it can be perfectly usable and still retain the overall design aesthetic even if the user has a very small or very wide screen.

The liquid layout approach might seem like the best approach at first glance—after all, who wouldn’t want to take advantage of all the screen real estate available to them? There is a fine line between taking advantage of space and not allowing the content to breathe, as it were. Too much content is overwhelming; not enough content in an open space is underwhelming.
The pure liquid layout can be quite impressive, but it requires a significant amount of testing to ensure that it is usable in a wide range of browsers at varying screen resolutions. You might not have the time and effort to produce such a design; in that case, a reasonable compromise is the fixed/liquid hybrid layout.

Fixed/Liquid Hybrid Layout

A fixed/liquid hybrid layout is one that contains elements of both types of layouts. For example, you could have a fluid layout that includes fixed-width content areas either within the body area or as anchor elements (such as a left-side column or as a top navigation strip). You can even create a fixed content area that acts like a frame in which the fixed content area remains fixed even as users scroll through the content.

--------------------------------------------------------------------------------------------------------------------------
Prepare 1/2 crosswise and answer the ff: (the written activity is until the end of this lesson)
1. What can you say about the layout of INQUIRER.NET and PHILSTAR.COM? Try to resize the windows of both pages and write your comments in not more than 5 sentences only.
--------------------------------------------------------------------------------------------------------------------------

Basic Layout Structure

Process 1

<html>
  <head>
    <title>Sample Layout</title>
    <link href="layout.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="header">HEADER</div>
    <div id="wrapper">
       <div id="content_area">CONTENT</div>
       <div id="left_side">LEFT SIDE</div>
       <div id="right_side">RIGHT SIDE</div>
    </div>
    <div id="footer">FOOTER</div>
  </body>
</html>

Expected Result

Process 2 - Defining Two Columns in a Fixed/Liquid Hybrid Layout

Adding the following code to the style sheet gives the header and footer area each a width of 100% and the same background color:

#header {
   float: left;
   width: 100%;
   background-color: #7152F4;
}
#footer {
   float: left;
   width: 100%;
   background-color: #7152F4;
}

Now things get a little trickier. We have to define the two fixed columns on either side of the page, plus the column in the middle. In the HTML, note that there is a <div> that surrounds all three, and it is called wrapper. This element is defined as follows:

#wrapper {
  float: left;
  padding-left: 200px;
  padding-right: 125px;
}

#left_side {
  position: relative;
  float: left;
  width: 200px;
  background-color: #52f471;
  right: 200px;
  margin-left: -100%;
}
#right_side {
  position: relative;
  float: left;
  width: 125px;
  background-color: #f452d5;
  margin-right: -125px;
}

At this point, let’s also define the content area so that it has a white background, takes up 100% of the available area, and floats to the left relative to its position:

#content_area {
  position: relative;
  float: left;
  background-color: #ffffff;
  width: 100%;
}

Expected Result

--------------------------------------------------------------------------------------------------------------------------

2. Resize the window to its maximum that will fit the entire screen and resize afterwards to a smaller window. What is your observation of the result?

--------------------------------------------------------------------------------------------------------------------------

Process 3 - Setting the Minimum Width of a Layout

body {
  margin: 0;
  padding: 0;
  min-width: 525px;
}

Expected Result

--------------------------------------------------------------------------------------------------------------------------

3. Resize the window to its maximum that will fit the entire screen and resize afterwards to a smaller window. What is your observation of the result?

--------------------------------------------------------------------------------------------------------------------------

Process 4 - Handling Column Height in a Fixed/Liquid Hybrid Layout