In the event we are dealing with some situation where it is not convenient to add the clearfix class (which is available frequently including in JumpStart), we can add the styling to the div that needs clearfix. So if we had markup like:
0 1 2 3 4 5 6 7 8 9 | <div class="wrapping-div-that-i-cant-change"> <div style="float: left; width: 45%"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie co </div> <div style="float: right; width: 45%"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut </div> </div><!--wrapping-div-that-i-cant-change--> |
we could add this css to clear:
0 1 2 3 4 5 6 7 8 9 | .wrapping-div-that-i-cant-change:before, .wrapping-div-that-i-cant-change:after { content: " "; display: table; } .wrapping-div-that-i-cant-change:after { clear: both; } |