CSS Position for divs

 html,body{
 height: 100%;
 width: 100%;
 overflow: hidden;
 margin: 0px;

 }
 .container {
//Make the Container Div position has relative
 position: relative;
 background: black;
 width: 100%;
 height: 100%;
 }
 .widgetPlacer
 {
 background: white;
// And the div which need to position should be absolute and give the
// top and left and right to place those
 position: absolute;
 }
 .top-right
 {
 top: 0%;
 left: 0%;
 }
 .top-left
 {
 top: 0%;
 right: 0%;
 }
 .top-middle
 {
 top: 0%;
 left: 50%;
 }
 .mid-left
 {
 left: 0%;
 top: 50%;
 }
 .mid-right
 {
 right: 0%;
 top: 50%;
 }
 .bottom-left
 {
 bottom: 0%;
 left:0% ;
 }
 .bottom-right
 {
 bottom: 0%;
 right: 0%;
 }
 .bottom-mid
 {
 bottom: 0%;
 left: 50%;
 }


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style>
 
 </style>
</head>
<body>
<div class="container">
 <div class="top-right widgetPlacer" >Top right</div>
 <div class="top-middle widgetPlacer">Top Mid</div>
 <div class="top-left widgetPlacer">top left</div>
 <div class="mid-left widgetPlacer">Mid left</div>
 <div class="mid-right widgetPlacer">mid right</div>
 <div class="bottom-left widgetPlacer">bottom left</div>
 <div class="bottom-mid widgetPlacer">bottom middle</div>
 <div class="bottom-right widgetPlacer">bottom right</div>
</div>
</body>
</html>
Top right
Top Mid
top left
Mid left
mid right
bottom left
bottom middle
bottom right
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s