<div class="box box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, nulla magnam perferendis cupiditate labore excepturi animi iste qui tenetur modi obcaecati sapiente dolores et quasi recusandae! Sapiente nesciunt odio officia!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, natus debitis quo amet consequatur. Voluptates similique minus et reiciendis molestias velit voluptas. Vero, praesentium voluptates deserunt delectus possimus eveniet quas.
<div class="box box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, nulla magnam perferendis cupiditate labore excepturi animi iste qui tenetur modi obcaecati sapiente dolores et quasi recusandae! Sapiente nesciunt odio officia!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, natus debitis quo amet consequatur. Voluptates similique minus et reiciendis molestias velit voluptas. Vero, praesentium voluptates deserunt delectus possimus eveniet quas.
Use the web inspector to adjust the box properties described below.
- Use the
box class to float both boxes to the left. What happens?
- Add a border to box1. What happens?
- Remove the border on box1 and increase the width to 55%. What happens?
- Decrease the width on box2 to 45%. What happens?
- Decrease the width on box2 to 40%. What happens?
- Add a 5% padding to box1. What happens?
- Adjust the width of box2 until it fits to the right of box1.
- Add a 2% margin on the left of box2. What happens?
- Set the
box-sizing property on box to be border-box. What happens?