Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .box1 { position: absolute; left: auto; width: 100px; height: 100px; background-color: #ccc; } .box2 { position: absolute; top: 190px; left: 50px; width: 100px; height: 100px; background-color: #444; color: #fff; } .box3 { position: absolute; left: 10%; top: 50%; width: 100px; height: 100px; background-color: #666; color: #fff; } .box4 { position: absolute; left: 20%; top: 70%; width: 100px; height: 100px; background-color: #777; color: #fff; } .box5 { position: absolute; left: -20px; top: 90%; width: 100px; height: 100px; background-color: #999; text-align: right; color: #fff; } </style> </head> <body> <h2>Left property example</h2> <div class="box1">left: auto</div> <div class="box2">left: 50px</div> <div class="box3">left: 10%</div> <div class="box4">left: 20%</div> <div class="box5">left: -20px</div> </body> </html>