first div makes all of the other divs move out of place - html

Question

My first image is throwing off everything. Go to my website and see what I mean. The three images on the right should be in the middle of the page and the text should be under the picture. What am i doing wrong?
<div id="img"><img src="images/15442_193554864778_3851953_n.jpg" width="245" height="306" alt="Me"/></div>
<div id="Lefttext"><p>Hello there. My name is Michael Pelvay and I am a Web specialist. A Web Specialist is between a Web Master and a Web Developer. A Web specialtist possesses the skills and knowledge to develop and implement dynamic Web sites, develop content-rich intranets and secure Web communications and web sites. </p></div>
<div id="portfolio"><img src="images/Portfolio.png" width="876" height="148" alt="portfolio" /></div>
<div id="resume"><img src="images/Resume.png" width="750" height="148" alt="Resume" /></div>
<div id="aboutme"><img src="images/About Me.png" width="624" height="148" alt="About Me" /></div>
html, body{
width:auto;
height:auto;
margin:0;
background-color:#121212;
}
#container{
margin:100px 50px 100px 300px;
min-width:500px;
max-width:1300px;
height:652px;
background-color:#26353c;
clear:both;
}
#img{
float:left;
width:245px;
margin:60px 0 0 60px;
}
#Lefttext{
color: #B5D5FB;
position:relative;
float: left;
width: 424px;
top:380px;
left:80px;
}
#portfolio{
float:right;
margin:100px -70px 0 0;
clear:right;
}
#resume{
float:right;
margin:15px -70px 0 0;
clear:right;
}
#aboutme{
float:right;
margin:15px -70px 0 0;
clear:right;
}
#name {
color:#FFF;
float:left;
margin:50px 0px 0px 320px;
}
#nav {
font-size:20px;
float:right;
margin:64px 250px 0px 0px;
}
#nav li{
display:inline;
margin-right:75px;
}
#nav a:link{
color:#C1CECC;
text-decoration:none;
}
#nav a:visited{
color:#C1CECC;
text-decoration:none;
}
#links{
font-size:24px;
}
#links a:link{
color:#C1CECC;
text-decoration:none;
}

Answer 1

You could give your #Lefttext a left: -245px, it wil put your text under the image

Answer 2

I tried this out in Chrome Dev tools, seems to work like you want:
#img{
float:left;
width:245px;
margin:60px 0 0 60px;
position: absolute;
}
Adding position: absolute; to the #img div takes it out of the flow of the document so everything else goes where you want.
If someone would like to explain why they gave a downvote to an answer that works and explains why it works, please feel free to add a comment below. :D

Answer 3

Mike - your challenge is a few different things:
If you float left, you need to clear: left anything you want to show below it.
If you have position relative, you should not specify top. top (as is left, right, bottom) are the appropriate properties for something positioned absolute or fixed.
Here's some suggested edits:
#Lefttext {
color: #B5D5FB;
float: left;
clear: left;
position: relative;
width: 424px;
margin-left: 80px;
}