float

значения свойства:

none
left
right
inherit

css/style.css

* {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFE0;
}
.main {
height: 600px;
width: 900px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -450px;
}
.top, .bottom {
height: 280px;
width: 900px;
}
.bottom {
border: 1px solid #808080;
background-color: #F0FFFF;
}
.middle {
height: 40px;
width: 900px;
}
.img-left, .img-right, #div1, .image-right {
height: 200px;
width: 250px;
padding: 5px;
}
.img-left {
float: left;
}
.img-right {
float: right;
}
.text {
text-align: justify;
}
.left, .right {
height: 278px;
width: 428px;
border: 1px solid #808080;
background-color: #F0FFFF;
float: left;
}
.center {
height: 278px;
width: 40px;
float: left;
}

* {
 margin: 0;
 padding: 0;
}

body {
 background-color: #FFFFE0;
}

.main {
 height: 600px;
 width: 900px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -300px;
 margin-left: -450px;
}

.top, .bottom {
 height: 280px;
 width: 900px;
}

.bottom {
 border: 1px solid #808080;
 background-color: #F0FFFF;
}

.middle {
 height: 40px;
 width: 900px;
}

.img-left, .img-right, #div1, .image-right {
 height: 200px;
 width: 250px;
 padding: 5px;
}

.img-left {
 float: left;
}

.img-right {
 float: right;
}

.text {
 text-align: justify;
}

.left, .right {
 height: 278px;
 width: 428px;
 border: 1px solid #808080;
 background-color: #F0FFFF;
 float: left;
}

.center {
 height: 278px;
 width: 40px;
 float: left;
}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>New Page</title>
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="top">
<div class="left">
<div id="div1">
<img src="img/hawaii1.jpg" />
</div>
<p class="text">
I was dreaming about Hawaii. I was dreaming about my holiday. In
my dream, I was on the beach in Hawaii. The hot sun was shining on
my face. The sound of the sea was all around me.
But it was a dream. Three weeks ago, I had been lying on a beach
in Hawaii. But I was not in Hawaii now. I was dreaming in my office
in Los Angeles. I had returned from my holiday and there was no
work for me.
</p>
</div>
<div class="center"></div>
<div class="right">
<div class="image-right">
<img src="img/hawaii2.jpg" />
</div>
<p class="text">
I was dreaming about Hawaii. I was dreaming about my holiday. In
my dream, I was on the beach in Hawaii. The hot sun was shining on
my face. The sound of the sea was all around me.
But it was a dream. Three weeks ago, I had been lying on a beach
in Hawaii. But I was not in Hawaii now. I was dreaming in my office
in Los Angeles. I had returned from my holiday and there was no
work for me.
</p>
</div>
</div>
<div class="middle"></div>
<div class="bottom">
<div class="img-left">
<img src="img/hawaii1.jpg" />
</div>
<div class="img-right">
<img src="img/hawaii2.jpg" />
</div>
<p class="text">
I was dreaming about Hawaii. I was dreaming about my holiday. In
my dream, I was on the beach in Hawaii. The hot sun was shining on
my face. The sound of the sea was all around me.
But it was a dream. Three weeks ago, I had been lying on a beach
in Hawaii. But I was not in Hawaii now. I was dreaming in my office
in Los Angeles. I had returned from my holiday and there was no
work for me. Nobody wanted to hire me. I went to my office every
day, but the telephone didn't ring. So I slept in my chair and I dreamt
about Hawaii.
I was dreaming a wonderful dream. The sun was hot. The noise of
the sea was loud and there was a beautiful woman standing next to
me. The woman looked around my office. She looked at the old
furniture and the dirty windows. She looked at the broken blind and
the plastic coffee cups in the waste bin. Then she looked at me. I
hadn't shaved. And my suit and hair were untidy. The woman didn't
speak.
</p>
</div>
</div>
<script>
/*JavaScript*/
document.getElementById("div1").style.cssFloat = "left";
/*jQuery*/
$(document).ready(function () {
$(".image-right").css({ "float": "right" });
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>New Page</title>
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="top">
<div class="left">
<div id="div1">
<img src="img/hawaii1.jpg" />
</div>
<p class="text">
I was dreaming about Hawaii. I was dreaming about my holiday. In
my dream, I was on the beach in Hawaii. The hot sun was shining on
my face. The sound of the sea was all around me.
But it was a dream. Three weeks ago, I had been lying on a beach
in Hawaii. But I was not in Hawaii now. I was dreaming in my office
in Los Angeles. I had returned from my holiday and there was no
work for me.
</p>
</div>
<div class="center"></div>
<div class="right">
<div class="image-right">
<img src="img/hawaii2.jpg" />
</div>
<p class="text">
I was dreaming about Hawaii. I was dreaming about my holiday. In
my dream, I was on the beach in Hawaii. The hot sun was shining on
my face. The sound of the sea was all around me.
But it was a dream. Three weeks ago, I had been lying on a beach
in Hawaii. But I was not in Hawaii now. I was dreaming in my office
in Los Angeles. I had returned from my holiday and there was no
work for me.
</p>
</div>
</div>
<div class="middle"></div>
<div class="bottom">
<div class="img-left">
<img src="img/hawaii1.jpg" />
</div>
<div class="img-right">
<img src="img/hawaii2.jpg" />
</div>
<p class="text">
I was dreaming about Hawaii. I was dreaming about my holiday. In
my dream, I was on the beach in Hawaii. The hot sun was shining on
my face. The sound of the sea was all around me.
But it was a dream. Three weeks ago, I had been lying on a beach
in Hawaii. But I was not in Hawaii now. I was dreaming in my office
in Los Angeles. I had returned from my holiday and there was no
work for me. Nobody wanted to hire me. I went to my office every
day, but the telephone didn't ring. So I slept in my chair and I dreamt
about Hawaii.
I was dreaming a wonderful dream. The sun was hot. The noise of
the sea was loud and there was a beautiful woman standing next to
me. The woman looked around my office. She looked at the old
furniture and the dirty windows. She looked at the broken blind and
the plastic coffee cups in the waste bin. Then she looked at me. I
hadn't shaved. And my suit and hair were untidy. The woman didn't
speak.
</p>
</div>
</div>
<script>
/*JavaScript*/
document.getElementById("div1").style.cssFloat = "left";
/*jQuery*/
$(document).ready(function () {
$(".image-right").css({ "float": "right" });
});
</script>
</body>
</html>