The A image and this text are floating on the left, i.e. the left content. Key CSS: float:
left; width:100px;.
The A image and this text are floating on the left, i.e. the left content. Key CSS: float:
left; width:100px;.
The B image and this text are floating on the right, i.e. the right content. Key CSS: float: right; width:15%;.
The C image and this text
are in the middle, i.e. the main content. If the window width is narrowed then, this stuff will be squeezed below both A and
B. Key CSS:
margin-right:10%; margin-left:10%;. This makes sure the main content does not slip
under the floating left and right content.
Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada.
Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada.
Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada.
Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada.
Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada. Yada yada yada.
The D image and this
text are beneath everything else, i.e. the additional content. Key CSS:
clear: both;. This makes sure that the additional content does not flow around
floating left and right content. Not that setting clear as right or left will appear to do nothing
because this example floats left and right.