I am a HTML,CSS newbie and I think I will alway be 
I have a simple HTML page. I would like to keep the intro of the page under the image on the page. But right now the intro is pushed up behind the image ( see attached ).
Is it possible to keep the intro section under the image just with the natural flow of elements? Am I supposed to give āmargin-topā to the intro section or āmargin-bottomā for the image to keep these two elements separate? I am sorry if this is a very silly basic questionā¦
My current HTML is
<!DOCTYPE >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="author" content="by ." />
<meta name="Copyright" content="Copyright © 2014 " />
<link type="image/x-icon" href="/root//favicon.ico" rel="icon" />
<title>Home Page title</title>
<meta name="keywords" content="Photographer Website" />
<meta name="description" content="Home Page Description" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="/root/theme/site/js/jquery-1.2.6.min.js">
</script>
<script type="text/javascript" src="/root/theme/site/js/jquery.touchwipe.1.1.1.js">
</script>
</head>
<body>
<div class="container">
<h1 id="header"><a href="/root/"></a></h1>
<div class="sub-container">
<ul class="nav">
<li><a href="/root/">HOME</a></li>
<li>| <a href="/root/photos">MY GALLERIES</a></li>
<li>| <a href="/root/search">SEARCH</a></li>
<li>| <a href="/root/about-me">ABOUT ME</a></li>
<li>|<a href="/root/carts"> CART(1)</a></li>
<li>| <a href="#">Product</a>
<ul class="submenu" id="submenu">
<li><a href="/products">Products</a></li>
<li><a href=
"/special-type-product">Ebook</a></li>
<li><a href="/4">Light</a></li>
</ul>
</li>
</ul>
<div id="slideshowContainer">
<div id="slideshow"><img src="country.jpg" class="active" align=
"middle" alt="Slider Title" /></div>
<div class="intro">
<p>Welcome to my gallery! This is a collection of images from my small trips to
break clear away from daily routines of life. Some very special memories are
captured and exhibited here to share with friends and family. To me, portraying
nature often is not a matter of intellect but of feelings. Hope you walk away
from these images with inspiration and love for nature.</p>
<div class="underline"></div>
</div>
</div>
</div>
</div>
<div class="footer">
<div id="seeker">
<form action="/root/photos/search" id="PhotoCmspageForm" method="get"
accept-charset="utf-8" name="PhotoCmspageForm">
<input name="search" id="search" value="" type="text" /><input type="submit" id=
"find" value="Search" />
</form>
</div>
<p class="footnote">Copyright © 2014 raj.com</p>
</div>
</body>
</html>
And my CSS is
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
font-size:100%;
/Color for all website fontsā@added By Rajesh Kumawat/
color:#8d643d;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
table {
border-collapse:collapse;
border-spacing:0;
}
body {
background:#FFF;
}
a {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover,a:focus {
text-decoration:none;
color:#fff;
}
a,input {
outline-color:invert;
outline-style:none;
outline-width:medium;
}
.nav {
width:100%;
float:right;
text-align : right;
padding:0 1px;
list-style:none;
position:relative;
z-index:1;
margin-right : 96px;
}
.nav li {
position:relative;
display:inline-block;
padding : 1px;
border-radius : 4px;
}
.nav > li:hover > a{
background-color : #5c331a;
}
.nav li a:hover {
color:#FFF;
}
.submenu > li:hover > a{
background-color : #5c331a;
}
.nav li a {
display:inline-block;
padding:2px 7px;
text-decoration:none;
color:#8d643d;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
}
#submenu.submenu {
display: none;
padding: 5px 0;
position: absolute;
z-index : 9999;
}
#submenu.submenu > li a{
width : 100%;
text-align : center;
z-index : 9999;
}
#submenu.submenu > li {
list-style: outside none none;
width : 100%;
z-index : 9999;
}
.nav > li:hover ul#submenu{
display: block;
}
#slideshowContainer {
height:100%;
}
#slideshow {
width:100%;
position:relative;
margin-right:auto;
margin-left:auto;
right:0;
padding-bottom:3em;
}
#slideshow IMG {
position:absolute;
top:8px;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
.intro {
font-family:āLucida Grandeā, sans-serif;
color:#DB814C;
font-size:19px;
text-align:center;
margin-right:auto;
margin-left:auto;
line-height:22px;
border-top:1px solid #8a3e1c;
}
.underline {
position:relative;
margin:0 auto;
z-index:1;
padding:35px 0 0;
background-image:url(../img/underline.png);
background-repeat:no-repeat;
background-position:center bottom;
text-align:right;
width:220px;
}
