\documentclass[programming]{mfcs}
\newcommand{\projectduedate}{Tuesday, April 4}
\newcommand{\quarter}{Spring 2017}
\usepackage{color}
\topic{Section 2: Floating Layouts and Basic JavaScript}
\course{CSE 154}{Web Programming}{\quarter}
\NoDate
%\hasmarginnotes
\usepackage{csquotes}
\usepackage{multicol}
%\setlength{\columnseprule}{2pt}
\begin{document}
\vspace{-3.8em}

\hfill\begin{varwidth}{0.5\textwidth}
{\large {\bf\color{colour} Due Date:} \projectduedate}
\end{varwidth}
\newline
\vspace{1em}

Directions: Solve the following problem on paper (or solve on the computer and
print out your solution) and bring it to your section on Tuesday.
\newline
\vspace{1em}

\begin{question}{0. Boxes and Floatses}
  Given the following HTML 
  \begin{lstlisting}
  <div id="one">one</div>
  <div id="two">two two</div>
  <div id="three">three three<br />three</div>
  <div id="four">four<br />four<br />four four</div>
  <div id="five">five five<br />five five five</div>
  <div id="six">six six six six <br /> six six</div>
  <div id="seven">seven seven seven seven seven seven seven</div>
  \end{lstlisting}
  \newline
  and CSS code:

  \begin{lstlisting}
  body     { text-align: center; }
  div      { border: 1px dashed gray; padding: 0.5em; margin: 0.5em; }
  #one     { background-color: #ff9999; }
  #two     { background-color: yellow; }
  #three   { background-color: #ccffcc; }
  #four    { background-color: #ccccff; }
  #five    { background-color: #ffdddd; }
  #six     { background-color: #cccccc; }
  #seven   { background-color: #9999ff; }
  \end{lstlisting}
  What CSS must be added to produce the following floating layout? Assume that
  the width of items like ''one`` and ''seven`` in the picture below consistutes
  100\% of the page width.
  \vspace{0.5em}
  \begin{center}
  \includegraphics[width=500px]{section2.png}
  \end{center}
\end{question}
\end{document}
