SP26 Section B Q1

Watch Closely the out put. This is the out put of below HTML code. you are required to draw the layout on your answer sheet and label the properties which have produced this output.

<div class="wrapper">
    <header>
      <h1>Float Layout Example</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <div class="clearfix"></div>
      </nav>
    </header>

    <div class="content">
      <div class="column left-column">
        <h2>Left Column</h2>
        <p>This is the left sidebar area.</p>
      </div>

      <div class="column middle-column">
        <h2>Middle Column</h2>
        <p>This is the first column on the right side.</p>
      </div>

      <div class="column right-column">
        <h2>Right Column</h2>
        <p>This is the second column on the right side.</p>
      </div>

      <div class="clearfix"></div>
    </div>

    <footer>
      &copy; 2026 Float Layout Demo
    </footer>
  </div>