## Float and Margins

We want to float one element left, the other right. We want content to be between the floated elements.

Example 10.42
Example 10.42 Source:
<p class="first" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p> <p class="second" >Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p> <p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. Ut pellentesque porta turpis. n vitae erat. Nam lacinia imperdiet lorem. Aliquam ullamcorper ultrices dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin quis orci eu erat molestie varius. Praesent condimentum orci in lectus. Ut ipsum. In hac habitasse platea dictumst. </p>
In style element (`<style type="text/css">`) within head element:
p.first { float: left; width: 30%; font-size: x-small; } p.second { float: right; width: 30%; font-size: x-small; }
Example 10.42 Rendered:

- With Styles
- Without Styles

Make the middle content not wrap around the floated contents (set margin for the middle content).

Example 10.43
Example 10.43 Source:
<p class="first" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p> <p class="second" >Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p> <p class="third" >Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. Ut pellentesque porta turpis.n vitae erat. Nam lacinia imperdiet lorem. Aliquam ullamcorper ultrices dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin quis orci eu erat molestie varius. Praesent condimentum orci in lectus. Ut ipsum. In hac habitasse platea dictumst. </p>
In style element (`<style type="text/css">`) within head element:
p.first { float: left; width: 30%; font-size: x-small; } p.second { float: right; width: 30%; font-size: x-small; } p.third { margin-left: 35%; margin-right: 35%; }
Example 10.43 Rendered:

- With Styles
- Without Styles