You are here: Home Tutorials Add Border Around Floating Divs

Tutorials

We hope you will find these tutorials useful.

Add Border Around Floating Divs

Super User
Posted by on in CSS
  • Font size: Larger Smaller
  • Hits: 529
  • Print
When you place two divs in a container, the container div itself has no height, since it only contains floating elements. Therefore the border stays at the top of the floating divs as indicated below. 
 .container {
 border: 1px solid #000000;
 }
 .left-content {
 width:45%;
 float: left;
 background-color:#83B983;
 }
 .right-content {
 width:45%;
 float: right;
 background-color:#D1C288;
 }
The Left Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
The Right Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien risus, sollicitudin quis rhoncus sit amet, mollis et augue. Aliquam nec nulla quam. Duis at erat erat. Pellentesque rhoncus lacus vel tortor fringilla blandit.


To force the border around the divs, you need to give the container a "width" and an "overflow" value.
 .container {
 border: 1px solid #000000;
 overflow: hidden;
 }
 .left-content {
 width:45%;
 float: left;
 background-color:#83B983;
 }
 .right-content {
 width:45%;
 float: right;
 background-color:#D1C288;
 }
The Left Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
The Right Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien risus, sollicitudin quis rhoncus sit amet, mollis et augue. Aliquam nec nulla quam. Duis at erat erat. Pellentesque rhoncus lacus vel tortor fringilla blandit.