Vladimir's Bauble

CSS Float

The red vertical line is within the yellow container, floated right. The green boxes are outside of it, floated right. The yellow container is not floated. Every element is a div with hardcoded height and width. Try to understand why the red line is rendered outside of the yellow container. There are three ways to fix the problem:

  • Assign "overflow:hidden" to the yellow box.
  • Remove one of the green boxes.
  • Assign "display:inline-block" to the yellow box.
First Right Panel Content
Second Right Panel Content
Copyright Vladimir Kornea