Created
November 13, 2011 23:56
-
-
Save smsohan/1362939 to your computer and use it in GitHub Desktop.
Example CSS for aligning a div inside another one!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<style> | |
.container{ | |
width: 10%; | |
height: 10%; | |
float: left; | |
background-color: green; | |
border: 1px solid #00FF 00; | |
margin: 0.5%; | |
position: relative; | |
} | |
.baby{ | |
width: 50%; | |
height: 50%; | |
background-color: red; | |
position: absolute; | |
} | |
.center{ | |
margin: 0 auto; | |
left: 25%; | |
} | |
.right{ | |
left: 50%; | |
} | |
.middle { | |
top: 25%; | |
} | |
.bottom { | |
top: 50%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="top_left" class="container"> | |
<div class="baby top left"> | |
</div> | |
</div> | |
<div id="top_center" class="container"> | |
<div class="baby top center"> | |
</div> | |
</div> | |
<div id="top_right" class="container"> | |
<div class="baby top right"> | |
</div> | |
</div> | |
<div id="middle_left" class="container"> | |
<div class="baby middle left"> | |
</div> | |
</div> | |
<div id="middle_center" class="container"> | |
<div class="baby middle center"> | |
</div> | |
</div> | |
<div id="middle_center" class="container"> | |
<div class="baby right middle"> | |
</div> | |
</div> | |
<div id="bottom_left" class="container"> | |
<div class="baby bottom left"> | |
</div> | |
</div> | |
<div id="bottom_center" class="container"> | |
<div class="baby bottom center"> | |
</div> | |
</div> | |
<div id="bottom_right" class="container"> | |
<div class="baby bottom right"> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment