I Need Help With Positioning a DIV under a other DIV

**Maverick Hawk 5** · Dec 17, 2012 14:27

I don't know what to do position a DIV under at the bottom of page im so confused on what to do. Im a intern for a web-design company but mostly Im just the photoshop/3d Animation/Modeling And Rendering and make vids for site, etc.

Note:This a template I found online. Gosh HTML has changed so much since I was in high school.

SAMPLE HTML MY PAGE.jpg postion

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.mousewheel.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/pop-ups.js"></script>
<script type="text/javascript" src="scripts/nav.js"></script>
</head>
<body>
<hgroup>
  <h1>Portfolio</h1>
  <h2>3D Animation/Graphic Design<h2>
</hgroup>
<nav>
  <ul id="menu" class="menu">
    <li> <a href="#" id="about"> <img src="images/AW.png" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">About me</span> <span class="descr">Know me</span> </span> </a> </li>
    <li> <a href="#" id="projects"> <img src="images/G Logo.png" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Projects</span> <span class="descr">My work</span> </span> </a> </li>
    <li> <a href="#" id="contact"> <img src="images/Ninja Penguin.png" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Contact</span> <span class="descr">Get in touch</span> </span> </a> </li>
    <li > <a href="#" id="blog"> <img src="images/GTR Render Menu.jpg" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Side Works</span> <span class="descr">3D-Animation-Model/Graphic Design</span> </span> </a> </li>
  </ul>
</nav>
<section id="bg">
  <section id="overlay"></section>
  <a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="images/gallery/Hankook Tire Ad 1 (Sample).jpg" id="bgimg" /></section>
<div id="preloader"><img src="images/ajax-loader_dark.gif" width="32" height="32" alt="" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="images/toolbar_fs_icon.png" width="50" height="50" alt="" /></a></div>
<div id="thumbnails_wrapper">
  <div id="outer_container">
   <div class="container">
        <div class="content">
          <div><a href="images/gallery/Hankook Tire Ad 1 (Sample).jpg"></a></div>
        </div>
        <div class="content">
          <div><a href="images/gallery/BMW M3 GTR.jpg"></a></div>
        </div>
        <div class="content">
          <div><a href="images/gallery/Hankook Tire Ad 2 (Sample).jpg"></a></div>
        </div>
        <div class="content">
          <div><a href="images/gallery/Ninja Penguin.jpg"></a></div>
        </div>
        <div class="content">
	<div><a href="images/gallery/Super Soldier.jpg"></a></div>
        </div>
	<div class="customScrollBox">
	<div class="content"><div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
        </div>
	</div>
       </div>
      </div>
     </div>
    </div>
   </div>
<article id="popupAbout" class="popupAbout">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupAboutClose"><img src="images/cross.png" width="20" alt="" /></a>
        <h>About: ME</h>
        <p class""><img src="images/globalgraffiti.jpg" alt="" class="image"/>Graduated from Lonestar Community North Harris College with Associates Degree in 3D Animation & Graphic Design. Recently now a intern for Global Graffiti.</p>
	<a></li>
<li><a href="http://www.globalgraffiti.net">Global Graffiti</a>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<article id="popupBlog" class="Blog">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
 <h>Side Works: ME</h>
	<p class""><img src="images/Sculpture Guitar.jpg" alt="Sculpt Guitar" class image width="720" height="960"></p>
	<p class""><img src="images/BMW M3 GTR.jpg" alt="BMW-GTR" class image width="720" height="480"></p>
	<p class""><img src="images/GTR Render.jpg" alt="GTR Render" class image width="720" height="480"></p>
	<p class""><img src="images/Audi And Jeep.jpg" alt="Audi-Jeep" class image width="720" height="480"></p>
	<p class""><img src="images/1995 Nissan Skyline GT-R R33 V-Spec.jpg" alt="GTR R33 V-Spec" class image width="720" height="480"></p>
	<p class""><img src="images/VetUSA Folder.jpg" alt="VetUSA Folder" class image width="720" height="480"></p>
	<iframe width="720" height="480" 
		src="http://www.youtube.com/embed/zuJpdEkBNVA"
		frameborder="0" allowfullscreen>
		</iframe>
	<div class="border"></div>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<script type="text/javascript" src="scripts/gallery.js"></script> 
<script type="text/javascript" src="scripts/jquery.mCustomScrollbar.js"></script>
</div>
</article>
<article id="popupProjects" class="popupProjects">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupProjectsClose"><img src="images/cross.png" width="20" alt="" /></a>
        <h>Projects: ME</h>
       	<div class="border"></div>
 	<h>Swirled-Ice [Made New Slides]</h>
	<p class="nomargin"><img src="images/Swirled Ice.jpg" alt="" class="image"/><a></li>
<li><a href="http://www.swirled-ice.com/default.aspx">Swirled-Ice</a><br>
        </p>
        <div class="border"></div>
        <h>Ultimate Solutions.Inc [Rendered 3D Animations For Site]</h>
        <p class="nomargin"><img src="images/Ultimate Solutions.jpg" alt="" class="image"/><a></li>
<li><a href="http://ultimatesolutions-inc.com">Ultimate Solutions.Inc</a><br/>
        </p>
        <div class="border"></div>
        <h>VetUSA [Made Folder And 3D VetUSA Logo]</h>
        <p><img src="images/VetUSA.jpg" alt="" class="image"/><a></li>
<li><a href="http://vetusa.com/">VetUSA</a><br/>
        </p>
        <div class="border"></div>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<article id="popupContact" class="popupContact">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupContactClose"><img src="images/cross.png" width="20" alt="" /></a>
        <h>Contact: ME</h>
        <form method="post">
          <label for="name">Name:</label>
          <input type="text" name="name" id="name" required placeholder="Name" />
          <label for="name">Subject:</label>
          <input type="text" name="subject" id="subject" required placeholder="Subject" />
          <label for="email">Email:</label>
          <input type="email" name="email" id="email" required placeholder="email@example.com" />
          <label for="message">Message:</label>
          <textarea name="message" id="message" required></textarea>
          <input type="submit" value="Send Message" />
        </form>
        </br>
        <iframe width="425" height="300" class="map" src="http://maps.google.com/maps?hl=en&amp;q=701+first+ave+sunnyvale+ca&amp;ie=UTF8&amp;hq=&amp;hnear=701+1st+Ave,+Sunnyvale,+California+94089&amp;z=14&amp;ll=37.416883,-122.026022&amp;output=embed"></iframe>
        <div id="social-network"> <a href="#" target="_blank"><img src="images/facebook.png" alt="Facebook" /></a> <a href="#" target="_blank"><img src="images/flickr.png" alt="Flicker" /></a> <a href="#" target="_blank"><img src="images/linkedin.png" alt="Linkedin" /></a> <a href="#" target="_blank"><img src="images/myspace.png" alt="Myspace" /></a> <a href="#" target="_blank"><img src="images/twitter.png" alt="Twitter" /></a> </div>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<article id="popupBlog" class="Blog">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
        <h>Side Works: ME</h>
	<p class""><img src="images/Sculpture Guitar.jpg" alt="Sculpt Guitar" class image width="720" height="960"></p>
	<p class""><img src="images/BMW M3 GTR.jpg" alt="BMW-GTR" class image width="720" height="480"></p>
	<p class""><img src="images/GTR Render.jpg" alt="GTR Render" class image width="720" height="480"></p>
	<p class""><img src="images/Audi And Jeep.jpg" alt="Audi-Jeep" class image width="720" height="480"></p>
	<p class""><img src="images/1995 Nissan Skyline GT-R R33 V-Spec.jpg" alt="GTR R33 V-Spec" class image width="720" height="480"></p>
	<p class""><img src="images/VetUSA Folder.jpg" alt="VetUSA Folder" class image width="720" height="480"></p>
	<iframe width="720" height="480" 
		src="http://www.youtube.com/embed/zuJpdEkBNVA"
		frameborder="0" allowfullscreen>
		</iframe>
	<div class="border"></div>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<script type="text/javascript" src="scripts/gallery.js"></script> 
<script type="text/javascript" src="scripts/jquery.mCustomScrollbar.js"></script>
<body> 
(SOMETHING HERE ?)
</div> 
</body>
</html>

STYLE

Code:

*/
html, body {
	height:100%;
	Width: 100%;
}
* {
	outline:none;
}
body {
	margin:0px;
	padding:0px;
	background:#000;
	font-family:'Century Gothic', arial, serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
}
hgroup {
	position:fixed;
	z-index:3;
	left:10px;
	top:10px;
	padding:10px;
	background:url(images/fs_img_g_bg.png);
	color:#FFF;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size: 20px;
	letter-spacing: 1px;
	text-shadow:rgba(0, 0, 0, 0.50) 0 1px 1px;
}
hgroup h1 {
	margin: 0px;
	text-shadow:rgba(0, 0, 0, 1) 3px 2px 0;
}
hgroup h4 {
	font-family:'Century Gothic', arial, serif;
	font-size: 22px;
	font-weight:normal;
	margin: 0px;
}
hgroup a {
	text-decoration:none;
	color: #FFF;
	border-bottom: 1px dashed #FFF;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
hgroup a:hover {
	background: rgba(0, 0, 0, 0.50);
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
#toolbar {
	position:fixed;
	z-index:3;
	right:10px;
	top:10px;
	padding:5px;
	background:url(images/fs_img_g_bg.png);
}
#toolbar img {
	border:none;
}
#img_title {
	position:fixed;
	z-index:3;
	right:10px;
	bottom: 60%;
	padding:10px;
	background:url(images/fs_img_g_bg.png);
	color:#FFF;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	text-transform:uppercase;
	font-size: 20px;
	letter-spacing: 1px;
}
#bg {
	position:fixed;
	z-index:1;
	overflow:hidden;
	width: 100%;
	height: 100%;
}
#overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	background: url(images/dotted.png);
	opacity: 0.3;
}
#bgimg {
	display:none;
	-ms-interpolation-mode: bicubic;
}
#preloader {
	position:relative;
	z-index:3;
	width:32px;
	padding:20px;
	top:80px;
	margin:auto;
	background:#000;
}
#thumbnails_wrapper {
	z-index:2;
	position:fixed;
	bottom:0%;
	width:100%;
	height: 205px;
	background:url(images/empty.gif);
}
.nextImageBtn, .prevImageBtn {
	display:block;
	position:absolute;
	width:50px;
	height:50px;
	top:50%;
	margin:-25px 10px 0 10px;
	z-index:3;
	filter:alpha(opacity=40);
	-moz-opacity:0.4;
	-khtml-opacity:0.4;
	opacity:0.4;
	-webkit-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	transition:all .25s linear;
}
.nextImageBtn:hover, .prevImageBtn:hover {
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity:0.8;
	opacity:0.8;
	-webkit-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	transition:all .25s linear;
}
.nextImageBtn {
	right:0;
	background:#000 url(images/nextImgBtn.png) center center no-repeat;
}
.prevImageBtn {
	background:#000 url(images/prevImgBtn.png) center center no-repeat;
}
ul.menu {
	margin:0;
	margin-top: -70px;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:680px;
	position:absolute;
	top:30%;
	right:0%
}
ul.menu a {
	text-decoration:none;
	outline:none;
}
ul.menu li {
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}
ul.menu li > a {
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(images/overlay.png) no-repeat bottom right;
	background-color: rgba(0, 0, 0, 0.75);
	-moz-box-shadow:0px 0px 2px #000 inset;
	-webkit-box-shadow:0px 0px 2px #000 inset;
	box-shadow:0px 0px 2px #000 inset;
}
ul.menu li a img {
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}
ul.menu li span.wrap {
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}
ul.menu li span.active {
	position:absolute;
	background: rgba(0, 0, 0, 0.75);
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow: 0px 0px 4px #000 inset;
	-moz-box-shadow: 0px 0px 4px #000 inset;
	box-shadow: 0px 0px 4px #000 inset;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	border-bottom-left-radius: 15px;
	-moz-border-radius-bottomleft: 15px;
}
ul.menu li span span.link, ul.menu li span span.descr, ul.menu li div.box a {
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}
ul.menu li span span.link {
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.menu li span span.descr {
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px; 
	font-size:10px;
	letter-spacing:1px;
}
ul.menu li div.box {
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.menu li div.box a {
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}
ul.menu li div.box a:first-child {
	margin-top:15px;
}
ul.menu li div.box a:hover {
	color:#fff;
}
article {
	display:none
}
.image {
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 5px;
	float: right;
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* Pop Up */
#popupAbout, #popupProjects, #popupContact, #popupBlog {
	height: 600px;
	width: 900px;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.80);
	border: 1px solid #cecece;
	z-index: 15;
	padding: 20px;
	color: #FFF;
	-webkit-box-shadow: 0px 0px 4px #000 inset;
	-moz-box-shadow: 0px 0px 4px #000 inset;
	box-shadow: 0px 0px 4px #000 inset;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	margin-top: -50px;
	visibility: hidden;
}
#popupAbout p, #popupProjects p, #popupContact p, #popupBlog p {
	padding-left: 10px;
	font-size: 16px;
	line-height: 24px;
}
#popupAbout h1, #popupProjects h1, #popupContact h1, #popupBlog h1 {
	text-align: left;
	font-size: 30px;
	letter-spacing: 1px;
	border-bottom: 1px dotted #D3D3D3;
	padding-bottom: 2px;
	margin: 0;
}
#popupAboutClose, #popupProjectsClose, #popupContactClose, #popupBlogClose {
	right: 0;
	top: 15px;
	position: absolute;
	display: block;
	opacity: 0.5;
	-webkit-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	transition:all .25s linear;
}
#popupAboutClose:hover, #popupProjectsClose:hover, #popupContactClose:hover, #popupBlogClose:hover {
	opacity: 1;
	-webkit-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	transition:all .25s linear;
}
.border {
	height: 3px;
	clear: both;
	border-bottom: 1px dotted #FFF;
}
*:focus {
	outline: none;/* Prevents blue border in Webkit */
}
form {
	font-family:'Century Gothic', arial, serif;
	width: 350px;
	margin-left: 25px;
}
input, textarea {
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	background-color: #fff;
	border: 1px solid #ccc;
	width: 300px;
	min-height: 30px;
	display: block;
	margin-bottom: 16px;
	margin-top: 8px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	color: #fff;
}
textarea {
	min-height: 200px;
	resize:none;
}
input:focus, textarea:focus {
	-webkit-box-shadow: 0 0 25px #ccc;
	-moz-box-shadow: 0 0 25px #ccc;
	box-shadow: 0 0 25px #ccc;
}
/* The interesting bit */
input:not(:focus), textarea:not(:focus) {
	opacity: 0.5;
}
input:required, textarea:required {
 background: url("images/asterisk_orange.png") no-repeat 280px 7px;
}
input:valid, textarea:valid {
 background: url("images/tick.png") no-repeat 280px 5px;
}
input:focus:invalid, textarea:focus:invalid {
 background: url("images/cancel.png") no-repeat 280px 7px;
}
input[type=submit] {
	font-size: 24px;
	padding: 10px;
	background: none;
	opacity: 1.0;
}
#social-network img {
	float: right;
	margin-left: 20px;
	opacity: 0.6;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
#social-network img:hover {
	opacity: 1;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
#social-network {
	float: right;
	margin-top: -150px;
	float: left;
	margin-left: 475px;
}
.map {
	margin-top: -500px;
	margin-right: 25px;
	border: 5px solid rgba(255, 255, 255, 0.30);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	float: right;
}
.date {
	float: left;
	position: relative;
	margin-right: 10px;
	padding: 44px 5px 0;
}
.date .month {
	text-transform: uppercase;
	font-size: 25px;
}
.date .day {
	font-size: 35px;
	line-height: 45px;
	position: absolute;
	left: 5px;
	top: 0;
}
.date .year {
	display: block;
	position: absolute;
	right: -5px;
	top: 15px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

**Maverick Hawk 5** · Dec 17, 2012 14:32

Im thinking of making a table or something

**ralph.m** · Dec 17, 2012 16:12

Hi Maverick Hawk 5. Welcome to the forums.

No, forget tables. They shouldn't be used for layout. By their very nature, divs and other block level elements sit underneath each other. So if that is not happening, it means some CSS is getting in the way. The most likely cause is using CSS positioning (like position: absolute; or position: fixed) which you do have in there.

However, it's hard to work out what parts of your code relate to that picture, so I'm not sure which element you are referring to. Ideally, post a live link to this is ou have one.

**Thelma** · Dec 17, 2012 18:13

What Ralph said --- and you have a redundant opening body tag towards the end of your html:
<body>
(SOMETHING HERE ?)
</div>
</body>
</html>

**Maverick Hawk 5** · Dec 18, 2012 15:40

Ok not the help I was expecting & for one thing how do I create a DIV below the image slider. If anyone can help me position info below the image slider...THAT WILL BE A HUGE THANKS. Also really Thelma I was guessing on where to put it; it was a start. I looked everywhere on the net and I can't seem to get some info or anything below the image slider I'm so confused. Not be rude but please DONT make a absurd answer with not anwsering my question; Im really new at html

**ralph.m** · Dec 18, 2012 15:45

Originally Posted by Maverick Hawk 5

Ok not the help I was expecting & for one thing how do I create a DIV below the image slider.

It looks like you didn't read our answers, or don't understand them. Rather than reply like you did, ask for clarification. To call our answers absurd is itself absurd. We are trying to help, and have actually told you what the problem is. If you want to understand what we are telling you, then ask questions. If you can't understand CSS basics and can't ask questions to help yourself understand, then you may be better off seeking a web designer.

**Maverick Hawk 5** · Dec 18, 2012 15:49

Really I need to change the style.CSS info or add I believe so that it can postion a DIV below the image slider. Thats all I need and the html Document. I dont know where to start. Its really driving me nuts. Just help me position DIV below the image silder, I thought it was really simple to understand with the representation of that pic I gave out.

**ralph.m** · Dec 18, 2012 15:53

Originally Posted by Maverick Hawk 5

I thought it was really simple to understand with the representation of that pic I gave out.

Well, I've already told you it isn't easy, because we don't know which bits are which in your image. Which bit is DIV HERE in your code? Read answers carefully and answer the questions we ask. Otherwise we can't help.

This would be much easier with a link.

**Maverick Hawk 5** · Dec 18, 2012 15:57

Originally Posted by ralph.m

It looks like you didn't read our answers, or don't understand them. Rather than reply like you did, ask for clarification. To call our answers absurd is itself absurd. We are trying to help, and have actually told you what the problem is. If you want to understand what we are telling you, then ask questions. If you can't understand CSS basics and can't ask questions to help yourself understand, then you may be better off seeking a web designer.

I think you dont understand what Im asking? Do you know at all how can postion a image for example I dont really care. My only problem is getting anything below the image slider thats all, I tried everything messing with the styles.CSS on looking at codes to help me from the net.

**ralph.m** · Dec 18, 2012 15:58

I can't help you unless you read my posts and answer the questions.

**Maverick Hawk 5** · Dec 18, 2012 16:00

Originally Posted by ralph.m

Well, I've already told you it isn't easy, because we don't know which bits are which in your image. Which bit is DIV HERE in your code? Read answers carefully and answer the questions we ask. Otherwise we can't help.

This would be much easier with a link.

A LINK TO WHAT?

**ralph.m** · Dec 18, 2012 16:06

Originally Posted by Maverick Hawk 5

A LINK TO WHAT?

To your website—what you've done so far—if it is online. That makes it much easier to help, and then we don't have to ask questions that you won't answer anyway.

A picture is not enough, just like you wouldn't give a picture to a doctor and ask him what's wrong with you. At the moment, it's not easy to match what's in the picture with the code you gave, hence my questions.

What you are asking is extremely simple, so don't despair! You just need to help us to help you.

**Maverick Hawk 5** · Dec 18, 2012 16:14

SAMPLE HTML MY PAGE.jpg Is this answer your questions on what I'm looking for better? I seriously tried everything. For one thing of what I do know is the image slider is the about the first thing of info in the html.CSS. I just dont know how to get a image, table or anything below the image slider. Positioning something is my nightmare I dont understand.

**Maverick Hawk 5** · Dec 18, 2012 16:19

OH THAT LINK BRB...IF I CAN FIND IT. In the mean time here is the image slider part

<section id="bg">
<section id="overlay"></section>
<a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="images/gallery/Hankook Tire Ad 1 (Sample).jpg" id="bgimg" /></section>
<div id="preloader"><img src="images/ajax-loader_dark.gif" width="32" height="32" alt="" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="images/toolbar_fs_icon.png" width="50" height="50" alt="" /></a></div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="container">
<div class="content">
<div><a href="images/gallery/Hankook Tire Ad 1 (Sample).jpg"></a></div>
</div>
<div class="content">
<div><a href="images/gallery/BMW M3 GTR.jpg"></a></div>
</div>
<div class="content">
<div><a href="images/gallery/Hankook Tire Ad 2 (Sample).jpg"></a></div>
</div>
<div class="content">
<div><a href="images/gallery/Ninja Penguin.jpg"></a></div>
</div>
<div class="content">
<div><a href="images/gallery/Super Soldier.jpg"></a></div>
</div>
<div class="customScrollBox">
<div class="content"><div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
</div>
I can't seem to get anything below the image slider.

**Maverick Hawk 5** · Dec 18, 2012 16:36

The

is IF I CAN FIND IT? OK I dont think I can find that sample template again. Oh gosh what to do?

**ralph.m** · Dec 18, 2012 16:39

Originally Posted by Maverick Hawk 5

The

is IF I CAN FIND IT?

Are you viewing your site on the internet, or are all the files (code, images etc.) just on your computer at this stage?

**Maverick Hawk 5** · Dec 18, 2012 16:48

I found a template online and added everything like changing the images. I get the idea what each section is but positioning something below the image slider which seems to be the whole page at the moment I don't know how to do; I don't know where to start

**Maverick Hawk 5** · Dec 18, 2012 16:59

I dont really care if its a table or image, etc my main issue is postioning something using the style.css so that I can get something below the image slider. Is that really difficult? If you want me tell you what each thing does I can do that.

**Maverick Hawk 5** · Dec 18, 2012 17:05

Originally Posted by Thelma

What Ralph said --- and you have a redundant opening body tag towards the end of your html:
<body>
(SOMETHING HERE ?)
</div>
</body>
</html>

I did try something but all I got was it being centered. Im just having a hard time make a space for some info or contents below the image slider.

ok lets say box for text as a div-how do I postion that. Really I just want something below the image slider thats all I need. Surely can you help with that?

**Maverick Hawk 5** · Dec 18, 2012 17:36

http://www.1stwebdesigner.com/css/fr...ss3-templates/

Vivid-#13

**ralph.m** · Dec 18, 2012 17:37

Originally Posted by Maverick Hawk 5

Surely can you help with that?

If you just had HTML on your page, and no CSS, the div would sit where you want by default. (The page would be quite plain, though, so we must use CSS.) But some CSS can change this situation. Your slider container has position:fixed; set on it in the CSS, and this means that it takes the slider "out of the flow" of the document. The div below it now can't "see" it, and so is likely to move to strange places.

We could fix this for you in a jiff if you were able to be more helpful in answering questions.

**Maverick Hawk 5** · Dec 18, 2012 17:57

OK seriously I was just asking what I should do...Im trying to do the best I can so that you can understand what I need help with. Really I was expecting a simple answer on how do I position FOR EXAMPLE a big text box or anything below the image slider. Where do I start besides I posted the link to where I found the template.

**ralph.m** · Dec 18, 2012 18:15

OK, we were posting at the same time. So your files are not online yet? It might be worth setting up your web hosting first, and uploading this to the web. (You will have to do that eventually anyway.) I think it would be much easier for us to help you that way.

I know this is frustrating, but we've made a few coding suggestions that have gone over your head, it seems. You will need to have some ability to work with HTML and CSS to help you with this. However, if the site is online, we can see everything that's involved, and much more easily walk you through the steps you need to take. At the moment, we don't have enough information, and so we are just guessing a bit.

It still feels like you are not reading our posts very carefully. If we make a comment about HTML or CSS and you don't understand, quote what we said and ask for clarification. We are trying to help here, but without your help, there's only so much we can do.

**Maverick Hawk 5** · Dec 18, 2012 18:21

I posted the link with the template im working on
Vivid-#13 http://www.1stwebdesigner.com/css/fr...ss3-templates/

download it thats the template im working with...please help me

I got rid of the thumbnail slider at the bottom

**ralph.m** · Dec 18, 2012 18:44

You could actually just use that thumbnail div as your new div. But the problem with this layout is that it's all set to height 100%, which is hard to change. You could have a new div at the bottom, where the thumbnails were, but it will sit over the top of the images in the background.

If that doesn't suit, I'd strongly recommend you dump this template and build one that truly meets your needs. Modifying all the JavaScript and CSS on that page is a tough job—not really worth it, in my opinion. If you are going to use a template, it's best to use it as is, or find/build another one that truly does what you need.

User Tag List

Thread: I Need Help With Positioning a DIV under a other DIV

Thread Tools

Display

I Need Help With Positioning a DIV under a other DIV

Bookmarks

Bookmarks

Posting Permissions