Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Fixing Collapsing Parent Issue</title> <style> .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .container{ background:yellow; border: 1px solid #000000; } .column-left, .column-right{ width: 200px; margin: 10px; padding: 10px; } .column-left{ float: left; background: #ff0000 } .column-right{ float: right; background: #00ff00; } </style> </head> <body> <div class="container clearfix"> <div class="column-left">Floated to left.</div> <div class="column-right">Floated to right.</div> </div> </body> </html>
