7.2 Student Activity

Create a simple layout with a header, two-column content, and a footer using float and clear. Experiment with positioning different elements using relative, absolute, and fixed properties.

Create a Simple Layout with Header, Two-Column Content, and Footer

  1. Step 1A:

  • Create a new HTML file (css-positioning-clear-layout.html) with the following structure:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Positioning Layout</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    header {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
    }
    .flex-container {
      display: flex;
      margin: 20px;
    }
    .column {
      width: 50%;
      padding: 10px;
      box-sizing: border-box;
    }
    footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
      position: fixed;
      width: 100%;
      bottom: 0;
    }
  </style>
</head>
<body>
  <header>
    <h1>My Web Layout</h1>
  </header>
  
  <h2>Without clear</h2>
    <div class="div1">div1</div>
    <div class="div2">
      div2 - Notice that div2 is after div1 with float left in the HTML code.
      However, since div1 floats to the left, the text in div2 flows around
      div1, because it is not cleared.
    </div>
    <br /><br />

  <h2>With clear</h2>
    <div class="div3">div3</div>
    <div class="div4">
      div4 - Here,css is set to clear: left; moves div4 down below the floating
      div3. The value "left" clears elements floated to the left. You can also
      clear "right" and "both".
    </div>

  <footer>
    <p>Footer Content</p>
  </footer>
</body>
</html>

  1. Step 1B: Add the HTML code snippet just below the <body> tag and insert CSS code snippet inside <head> tag (internal CSS):

<!--  HTML code snippet -->
<h2>Float positioning</h2>
<div class="container">
      <div class="normal-text">This text is normal text flow element.</div>
      <div class="float-left">Float Left</div>
      <span>
        This text will wrap around the floated element. This text will
        wraparound the floated element. This text will wraparound the floated
        element. This text will wraparound the floated element.</span
      >
      <div class="float-left">Float Left</div>
    </div>
// CSS code snippet
/* CSS snippet for float positioning */
      property .container {
        width: 300px;
        border: 1px solid black;
      }

      .float-left {
        float: left;
        width: 150px;
        background-color: lightblue;
      }

  1. Step 2:

  • Experiment with Positioning:

    • Change the position of the footer to relative, fixed, and absolute to see how the footer behaves.

    • Try applying position: absolute; to the left column and move it 50px down and to the right:

      .column {
  position: absolute;
  top: 50px;
  left: 50px;
}

  1. Step 3:

  • Use Float: Remove the display: flex; from the .container class and apply float to the columns to create a floated two-column layout.

    .column {
  float: left;
  width: 50%;
}

  1. Step 4:

  • Test the layout in your browser and see how floating elements, positioning, and display properties work together.

  1. Step 5:

  • Modify the original HTML and CSS code above to test how the z-index property in CSS controls the stacking order of elements.

// HTML code snippet for z-indexing
<h2>HTML code snippet for z-indexing</h2>
<div class="container-z">
  <div class="element1">Element 1</div>
  <div class="element2">Element 2</div>
  <div class="element3">Element 3</div>
</div>
/* CSS code snippet for z-indexing */
.container-z {
  position: relative; /* Necessary for absolute positioning */
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.element1, .element2, .element3 {
  position: absolute;
  width: 100px;
  height: 100px;
}

.element1 {
  background-color: red;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.element2 {
  background-color: green;
  top: 50px;
  left: 50px;
  z-index: 2;
}

.element3 {
  background-color: blue;
  top: 80px;
  left: 80px;
  z-index: 3;
}

Modify styles to reorder the stacking order from 1-2-3 to 3-2-1.

Previous7.1 CSS Positioning & Display PropertiesNext7.3 Homework/Practice

Last updated