layout-ex01

Float image

by jywglady

HTML

<div>
  <div class="left">
  My Menu
  <ul>
    <li><a href="#">Helen Keller</a></li>
    <li><a href="#">Albert Schweitzer</a></li>
    <li><a href="#">Mahatma Gandhi</a></li>
  </ul>
  </div>
  
  <div class="right">
  Helen Adams Keller (June 27, 1880 – June 1, 1968) was an American author,
  political activist, and lecturer. She was the first deaf-blind person to earn a
  Bachelor of Arts degree. The story of Keller and her teacher, Anne Sullivan, was
  made famous by Keller's autobiography, The Story of My Life, and its adaptations
  for film and stage, The Miracle Worker. Her birthplace in West Tuscumbia, Alabama,
  is now a museum[1] and sponsors an annual "Helen Keller Day". Her June 27 birthday
  is commemorated as Helen Keller Day in Pennsylvania and, in the centenary year of
  her birth, was recognized by a presidential proclamation from Jimmy Carter.
  <p class="source">~ From Wikipedia</p>
  </div>
</div>

CSS

.left {
  float: left;
  width: 220px;
  border: 1px solid brown;
  padding: 12px 0 0 6px;
}
.right {
  margin-left: 230px;
  text-align: justify;
  border: 1px solid green;
  padding: 12px;
}
.source {
  text-align: right;
  font-style: italic;
}