Positioning in CSS

Positioning in CSS

by mraufk

HTML

<div id="div-before" class="basic">
    div-before
</div>
<div id="div-normal">
    div-normal
</div>
<div id="div-relative">
    div-relative
</div>
<div id="div-absolute">
    div-absolute
</div>
<div id="div-1">
    div-1
    <div id="div-1a">
        div-1a
    </div>
</div>
<div id="div-after" class="basic">
    div-after
</div>
<div>
    &nbsp;
</div>
<div id="div-two-column" class="basic">
    Table Header
    <div id="div-first-column">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.
    </div>
    <div id="div-second-column">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
    </div>
</div>

CSS

#div-normal
{
    background-color: red;
    display: inline;
    color: white;
}
#div-relative
{
    background-color: blue;    
    color: white;
    position: relative;
    top:5px;
    left: 25px;
}
.basic
{
      background-color: green;   
    color:yellow;
}
#div-absolute
{
    background-color: yellow;   
    color: black;
    position: absolute;
    top:0px;
    left:0px;
    display:inline;
}

#div-1
{
    background-color: purple;
    height: 100px;
    position: relative;
}
#div-1a
{
    border-color: white;
    background-color: yellow;
    border-width:1px;
    border-style:bold;
    width:50px;
    
    position: relative;
    top:0px;
    left: 50px;
}
#div-two-column
{

    position:relative;
}

#div-first-column
{
    background-color: black;
    width:200px;
    postion: absolute;
    top:0px;
    left:0px;
}
#div-second-column
{
    background-color: red;
    width:200px;
    postion: absolute;
    top:0px;
    right:0px;
}