Div behind a div, problem! [Archive]

Samuel235

04-13-2011, 03:36 PM

Hey guys,
I have a slight problem that i have spent a decent amount of time on and im losing the plot now....

I have a div containing text in <p>'s then followed by a div with a bottom border on.

The problem is it seems that the border div is sitting behind the text div, i need it to follow it, the idea im after is the same thats on my other site (the original that i changed the image slideshow on it) www.matthews235.co.uk. Ill post the whole of the html and css below....

Thanks in advance.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>BigLampPhotography.co.uk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Big Lamp Photography" />
<meta name="keywords" content="Big Lamp Photography" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="2 days" />


<link rel="stylesheet" type="text/css" href="main.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [888, 305], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["1.jpg", "", "", ""],
["2.jpg", "", "", ""],
["3.jpg", "", "", ""],
["4.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>
</head>

<body>
<div id="Google">
<h1>Big Lamp Photography</h1>
<p>Big Lamp Photography - <a href="http://www.biglampphotography.co.uk">http://www.biglampphotography.co.uk</a></p>
</div>
<div id="Navcontainer">
<div id="Nav">
<ul>
<li><a class="nm" href="#"><img src="images/navhome.png" alt=""/></a></li>
<li><a class="nm" href="portraits.html"><img src="images/navportraits.png" alt=""/></a></li>
<li><a class="nm" href="gallery.html"><img src="images/navgallery.png" alt=""/></a></li>
<li><a class="nm" href="crazy.html"><img src="images/navcrazy.png" alt=""/></a></li>
<li><a class="nm" href="contact.html"><img src="images/navcontactus.png" alt=""/></a></li>
<li><a href="sales.html"><img src="images/navsales.png" alt=""/></a></li>
</ul>
</div>
</div>
<div class="spacer15"></div>
<div id="Pagetitle">
<img src="images/pagetitlehome.png" alt=""/>
</div>
<div class="spacer15"></div>
<div id="Pagecontainer">
<div id="Pagehome">
<div class="spacer7"></div>
<div id="fadeshow1"></div>

<div class="Hometext">
<p>Welcome to the site, please have a look around and see what we can offer you.</p>
<br><br style='font-size:2px;'>
<p>Big Lamp can offer a range of services to suit all tastes and budgets, we offer a very individual service and we can even set up a studio in your home.</p>
<br><br style='font-size:2px;'>
<p>Please enjoy the site and let us know if we can help you.</p>
</div>
</div>
<div id="Bottomborder"></div>
</div>
</body>

</html>

CSS
* {
margin:0;
padding:0;
}

img {
border:none;
}

body {
}

ul{
list-style-type:none;
font-size: 0px;
}

/***** GOOGLE *****/

#Google {
Display:none;
}

/***** NAVBAR STYLES *****/

#Navcontainer{
background-image: url("images/navbg.png");
background-repeat: repeat-x;
height: 69px;
text-align:center;
vertical-align: middle;
overflow:auto
}

#Nav {
width: 902px;
margin: 27px auto 0;
text-align: center;
}

#Nav ul {
list-style-type: none;
}

#Nav li {
display:inline;
margin-right: 40px;
}

/***** CONTENT STYLES *****/

#Pagecontainer {
text-align:center;

}

#Page{
background-color:#000980;
width: 902px;
margin: 0 auto;
}

#Page img {
border: 1px solid white;
}

#Pagetitle {
text-align: center;
}

#Bottomborder {
margin-top: 30px;
border-bottom: 2px solid #000980;
}

.Hometext {
color: #000980;
width: 888px;
margin: 6px auto 0;
text-align: center;
padding-top: 30px;
background-color: white;
font-size: 16pt;
font-family: ariel;
}

.spacer15 {
height: 15px;
}

.spacer60 {
height: 60px;
}

.Imagecontainerone {
padding: 6px 0 0 0;
}

.Imagecontainerone .Leftlist {
Width: 442px;
float: left;
margin: 0 3px 0 6px;
}

.Imagecontainerone .Leftlist li{
margin: 0 0 6px 0;
}

.Imagecontainerone .Rightlist {
Width: 442px;
float: right;
margin: 0 6px 0 3px;
}

.Imagecontainertwo {
margin: 6px 0 0 0;
}

.Imagecontainertwo .Leftlist {
Width: 442px;
float: left;
margin: 0 3px 0 6px;
}

.Imagecontainertwo .Rightlist {
Width: 442px;
float: right;
margin: 0 6px 0 3px;
}

.Imagecontainertwo .Rightlist li{
margin: 0 0 6px 0;
}

.Landscapeimage {
margin: 0 6px 0 6px;
}

.Clear {
clear:both;
}

/***** FADESLIDESHOW STYLES *****/

.spacer7 {
height: 7px;
}

#fadeshow1 {
width: 888px;
height:305px;
text-align: center;
margin: 0 auto;
}

/***** HOMEPAGE PAGE LAYOUT *****/

#Pagehome {
background-color:#000980;
width: 903px;
height: 319px;
margin: 0 auto;
min-height: 319px;
}