Make The Height of a Parent Div Wrap Around The Children with Float

Using floating divs is great, but can cause lots of other issues sometimes. One particular one is getting the height of a parent div to wrap around its children if the children have the float attribute.

There are several ways to do this mentioned in this Stack Overflow post, but here is the one that worked for me:

Use the :after psuedoelement on the parent div with the following CSS:

.parent:after {
  content: "";
  display: table;
  clear: both;	
}

Horizontal Line in HTML

So this is pretty simply, but I feel pretty useful.

To make a horizontal line, use the

<hr>

tag.  With no styling, it will give a result like this:


You can style it just like any other element, using CSS.

 <hr  style="height:3px;background-color: black;width:90%;" class="line1">

gives


Some credit here, although some of the stuff in that post is deprecated. I believe in HTML5, the best practices are to just use standard CSS to style lines.