<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of clearing floats</title> <style> .container{ background:blue; border: 5px solid black; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .container div { width: 230px; margin: 15px; padding: 15px; } div.red { float: left; background: #ff0000 } div.green { float: right; background: #00ff00; } </style> </head> <body> <div class="container clearfix"> <div class="red">Floated to left.</div> <div class="green">Floated to right.</div> </div> <p><strong>Strong;</strong>This is a frist paragraph .</p> </body> </html>