html - Unable to position an element -
i'm trying position 'about me' box unable posiition down. can move left or right using margin-left or margin-right properties i'm not able move top or down. have used float:right position sidebar. used clear:both on header. still remains stationary.
the following images understand problem.
the code of page here (jsfiddle)
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="description"> <link rel="stylesheet" media="screen" href="style123.css"> <!--[if ie]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>my first page</title> </head> <body> <div id="wrapper"> <ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">work</a></li> <li><a href="#">contact</a></li> </ul> <div id="box"> <h3> me </h3> </div> </div> </body> </html>
css:
body { background: #091a1b; color: #544738; font-family: helvetica, sans-serif; } #nav { margin-top: 0px; float: right; } ul li { float: left; list-style: none; margin-right: 1em; } li { color: #544738; text-decoration: none; float: left; font-size: 25px; padding: 12px; } li a:hover { -webkit-transform: rotate(-10deg) scale(1.2); -moz-transform: rotate(-10deg) scale(1.2); -o-transform: rotate(-10deg) scale(1.2); color: #25296f; } #box { background-color: black; width: 150px; height: 38px; margin-left: 500px; clear: both; margin-top: 500px; }
#box { position:absolute; background-color: black; width: 150px; height: 38px; margin-left: 0px; clear: both; margin-top: 200px;
}
take @ demo: give different position margin-top , position changes....