CSS - Basic Positioning

by Ben Clayton

HTML

<div class="big">
  C<div class="upabit">+</div>World
</div>

<div class="big">
  Line 1
</div>
<div class="big" style="left:2px">
  Line 2
</div>
<div class="big">
  <div class="pushout">
    Line Position:absolute
  </div>
</div>
<div class="big">
  <div class="fixit">
    Line position:Fixed
  </div>
</div>
<div class="big">
  Line 4
</div>
<div class="big">
  Line 4
</div>
<div class="big">
  Line 4
</div>
<div class="big">
  Line 4
</div>
<div class="big">
  Line 4
</div>
<div class="big">
  Line 4
</div>


<div id="footer">
  credits
</div>

CSS

div {
  color: red;
}

.upabit {
  display:inline-block;
  xborder:green solid 1px;
  position: relative;
  top:0px;
  left:-6px;
}

.big {
  position: relative;
  font-size: 30px;
  border: blue solid 1px;
  margin-bottom: 3px;
  height: 100px;
}

#footer {
  font-size: 10px;
}

.pushout {
  position: absolute;
  top: 4px;
  left: 30px;
}
.fixit {
  position:fixed;
  bottom:10px;
  right:100px;
}