Exercise 213-03: Write a property to stop elements from sliding under floats

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam.

Before

example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis.

overflow: hidden

example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam.

float: left

example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam.

display: inline-block

example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam.

display: flow-root

example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam.

contain: layout

example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, aliquam, eos? Enim ipsa repellat culpa expedita omnis, repudiandae error architecto a nam, consequuntur incidunt molestiae deleniti explicabo eius aut aliquam.