fixed layout example

When we define layout of an html document to be fixed, the size and position of the html components will stay same even if we decrease the size of web page. In other words, the html page will not be responsive. In fixed layout, we assign widths using pixel units.

The following is a complete example of fixed layout:

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <meta charset="utf-8" />

    <style>
        body
        {
            width:960px;
            margin:0 auto;
        }

        #content
        {
            overflow: auto;
            height:100%;      
        }

        #nav, #feature, #footer
        {
            background-color:#efefef;
            padding: 10px;
            margin: 10px;
        }

        .column1, .column2, .column3
        {
            background-color:#efefef;
            width:300px;
            float:left;
            margin:10px;
        }
        
        li
        {
            display:inline;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Logo</h1>
        <div id="nav">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Products</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </div>

    <div id="content">
        <div id="feature">
            <p>Feature</p>
            <p>This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. This is feature text. </p>
        </div>
        <div class="article column1">
            <p>Column One</p>
            <p>Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them. Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them.</p>
        </div>

        <div class="article column2">
            <p>Column Two</p>
            <p>
                Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them.
            </p>
        </div>

        <div class="article column3">
            <p>Column Three</p>
            <p>
                Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them.
            </p>
        </div>

    </div>

    <div id="footer">
        <p>&copy; Copyright 2017</p>
    </div>
</body>
</html>

 

Add a Comment

Your email address will not be published. Required fields are marked *