CSS ex2b

by Ben Clayton

HTML

<div class="box1">
  <div class="box2">
hdsfkjhsdkjf<br>
hdsfkjhsdkjf<br>
hdsfkjhsdkjf<br>
hdsfkjhsdkjf<br>
hdsfkjhsdkjf<br>


  </div>
</div>


<br>
<br>
<br>
<br>
<br>

<div class="box1">
  <div class="box2">

  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div class="memo">
remember to ring<br>
remember to ring<br>
remember to ring<br>
remember to ring<br>
remember to ring<br>
remember to ring xx<br>
</div>


<div class="footer">
client address etc
</div>

CSS

.box1 {
  position: relative;
  width: 50%;
  height: 50px;
  border: 1px solid red;
  margin:0 auto;
  overflow:auto;
}

.box2 {
  position: absolute;
  top: 0px;
  left: 30%;
  width: 40%;
  border: 1px solid green;
  border-radius:10px;
}

.footer {
  background-color:black;
  color:white;
  position:fixed;
  bottom:0px;
  left:0px;
  right:0px;
  height:50px;
  z-index:1;
}

.memo {
  background-color:gray;
  border: 1px solid green;
  position:fixed;
  bottom:30px;
  right:0px;
  height:150px;
  width:100px;
  z-index:2;
}