CSS Test: Two columns layout

Last modified by XWikiGuest on 2021/05/03 08:05

The header and footer must have 100% width and their heights can vary.

The side column must have a fixed width (200px) with a 16px padding and a 10px horizontal distance from other elements.

The whole ensemble (content + side column) fills the entire window width.

Task: Write 2 CSS files:

  • The first one for places the side column on the left of the content:

          [ col ] [ the content ]

  • The second places the side column on the right of the content

          [ the content ] [ col ]

Note: No changes allowed in the HTML.

Note 2: You can use the Copy entry from the Page menu to create a copy of this document for the second stylesheet.

Edit CSS

<div id="all">
 <div id="header">The header</div>
 <div id="wrapper1">
   <div id="wrapper2">
     <div id="content">
        The content
     </div>
   </div>
   <div id="sideColumn">
      This is the side column, which should contain some panels.
   </div>
 </div>
 <div id="footer">The footer</div>
</div>
The content
This is the side column, which should contain some panels.