جایگذاری شناور Floated

#nav {

float: right;

width: 300px;

background-color: yellow;

}

<div id="nav">

<ul>

<li><a href="index.html">This is an area of navigation

items</a></li>

<li><a href="index.html">which is floated on the

right.</a></li>

<li><a href="turkish.html">Turkish Shaving Stories.</a></li>

<li><a href="http://www.bubbleunder.com/">Diving

Stories.</a></li>

</ul>

</div><!-- end of nav div -->

<h1>Turkish Shaving Stories</h1>

<p>Next came a massage that I was not expecting. It started with a

bit of manipulation of the temples, followed by the barber's

attempt to drag the top half of my face down towards my chin

(and vice-versa) with his big burly hands. I'm sure it's good

for you. I wasn't sure it was good for me, though. He then

made his way down to my shoulders and managed to pull me

around in such a way that I squealed like a girl. This was not

relaxing -- this was painful! Evidently I was knotted up. I

must have needed it, I reasoned.</p>

<p>There was an audible crack as he grabbed my head and twisted it

to the right, all of it quite unexpected. To the left, no

cracking sound. And we weren't quite done yet ...</p>

<p>To finish off, the barber got a pair of tongs. He took a ball

of cotton wool and wrapped it tightly around the tip of the

tongs, so that it looked like a large cotton bud. He then

doused the cotton wool in what must have been pure alcohol,

set it on fire, and began to fling it at my face. Using one

hand to cover the top of my ear and my hair, he flashed it

against my ear, singeing the small hairs in and around the

ear.</p>

#nav {

float: right;

width: 300px;

background-color: yellow;

}

.contentconstrained {

padding-right: 310px;

}

<div id="nav">

<ul>

<li><a href="index.html">This is an area of navigation

items</a></li>

<li><a href="index.html">which is floated on the

right.</a></li>

<li><a href="turkish.html">Turkish Shaving Stories.</a></li>

<li><a href="http://www.bubbleunder.com/">Diving

Stories.</a></li>

</ul>

</div><!-- end of nav div -->

<div class="contentconstrained">

<h1>Turkish Shaving Stories</h1>

<p>Next came a massage that I was not expecting. It started with a

bit of manipulation of the temples, followed by the barber's

attempt to drag the top half of my face down towards my chin

(and vice-versa) with his big burly hands. I'm sure it's good

for you. I wasn't sure it was good for me, though. He then

made his way down to my shoulders and managed to pull me

around in such a way that I squealed like a girl. This was not

relaxing -- this was painful! Evidently I was knotted up. I

must have needed it, I reasoned.</p>

<p>There was an audible crack as he grabbed my head and twisted it

to the right, all of it quite unexpected. To the left, no

cracking sound. And we weren't quite done yet ...</p>

<p>To finish off, the barber got a pair of tongs. He took a ball

of cotton wool and wrapped it tightly around the tip of the

tongs, so that it looked like a large cotton bud. He then

doused the cotton wool in what must have been pure alcohol,

set it on fire, and began to fling it at my face. Using one

hand to cover the top of my ear and my hair, he flashed it

against my ear, singeing the small hairs in and around the

ear.</p>

</div><!-- end of contentconstrained div -->

<div id="bodycontent">

<h2>Welcome to our super-dooper Scuba site</h2>

<p><img src="divers-circle.jpg" class="feature" width="200"

height="162" alt="A circle of divers practice their

skills"/></p>

<p>Glad you could drop in and share some air with us! You've

passed your underwater navigation skills and successfully

found your way to the start point - or in this case, our

home page.</p>

</div><!-- end of bodycontent div -->

.feature {

float: right;

margin: 10px;

}