Explain Fluid Layouts

1views

written 7.8 years ago by

• modified 7.8 years ago

Liquid layouts (also called fluid layouts) define horizontal measurements using percentages, adapting to the browser’s width and helping prevent the dreaded horizontal scroll. The default style for block-level elements is equivalent to a full width, single column liquid layout. The main disadvantage of percentages is that without a little care it’s easy to make unreasonably long line lengths on large displays, which hurt readability. Because of this, liquid layouts generally should be used with min-width and max-width values in ems or pixels. Figure 9-26 shows an example of a liquid page layout.

Example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
    font-family: "Lucida Sans", Verdana, sans-serif;
}
.main img {
    width: 100%;
}
h1{
    font-size: 1.625em;
}
h2{
    font-size: 1.375em;
}
@media screen and (min-width:1024px)
{

.header {
    padding: 1px;
    background-color: blue;
    border: 1px solid #000000;
}
}
.menuitem {
    margin: 4px;
    margin-left: 0;
    margin-top: 0;
    padding: 4px;
    border-bottom: 1px solid #111111;
    cursor: pointer;
}
.main {
    padding: 2px;
}
.right {
    padding: 2px;
    background-color: #CDF0F6;
}
.footer {
    padding: 1px;
    text-align: center;
    background-color: #f1f1f1;
    border: 1px solid #000000;
    font-size: 0.625em;
}
.gridcontainer {
    width: 100%;
     border: 1px solid #ff0000
}
.gridwrapper {
    overflow: hidden;
      border: 1px solid #00ff00;
}
.gridbox {
    margin-bottom: 0.20%;  /*2 divide by 960*/
    margin-right: 0.20%;
    float: left;
    border: 1px solid #0000ff;
}
.gridheader {
    width: 100%;
   border: 1px solid #00ff00;
}
.gridmenu {
    width: 20.83333333%; /*200 divide by 960*/
}
.gridmain {
    width: 52.08333333%;/*500 divide by 960 */
}
.gridright {
    width: 23.9583333333%;
    margin-right: 0;
}
.gridfooter {
    width: 100%;
    margin-bottom: 0;
}
@media only screen and (max-width: 960px) {
    .gridmenu {
        width: 100%;
    }
    .menuitem {
        margin: 1px;
        padding: 1px;
    }
    .gridmain {
        width: 100%;
    }
    .main {
        padding: 1px;
    }
    .gridright {
        width: 100%;
    }
    .right {
        padding: 1px;
    }
    .gridbox {
        margin-right: 0;
        float: left;
    }
}
</style>
</head>
<body>
<div class="gridcontainer">
    <div class="gridwrapper">
        <div class="gridbox gridheader">
            <div class="header">
                <h1>The Penguin </h1>
            </div>
        </div>
        <div class="gridbox gridmenu">
            <div class="menuitem">The Drive</div>
            <div class="menuitem">The Walk</div>
            <div class="menuitem">The Return</div>
            <div class="menuitem">The End</div>
        </div>
        <div class="gridbox gridmain">
            <div class="main">
<h1>The Penguin</h1>
<p>The Penguins are group of aquatic flightless birds found in Antactica </p>
<img src="Penguins.jpg" alt="Penguins" width="" height="">
            </div>
        </div>
        <div class="gridbox gridright">
            <div class="right">
<h2>What?</h2>
<p>The Peinguin is a bird</p>
<h2>Where?</h2>
<p>They are found in the Southern hemisphere</p>
            </div>
        </div>
        <div class="gridbox gridfooter">
            <div class="footer">
<p>This web page is a part of a demonstration of fluid web design made by www.Penguins
.com. Resize the browser window to see the content response to the resizing.</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Output:

enter image description here

ADD COMMENT EDIT