...

View Full Version : Footer not staying in main wrapper div



gingerbread
07-29-2012, 06:19 PM
Hi,

I have a nice background for my content. unfortunately, my footer seems to be lurking outside of my wrapper div for some reason. I validated and solved some issues, tried removing all html5 tags, my container div but still am faced with the same issue. I debugged and the closing div for my wrapper definitely comes after my footer. Please help! Herewith the link: http://bit.ly/MsKxQS

tempz
07-29-2012, 06:53 PM
I think this should fix your problem ;)

CSS:




/* General styles
----------------------------------------------- */

body {
background-image: url(images/body_bg.png);
background-repeat: repeat;
font-size: 100%;
font-family: Arial;
color: #e2e2e2;
margin: 0;
padding: 0;
}

#wrapper {
width: 1024px;
margin-left: auto;
margin-right: auto;
margin-top: -10px;
background-image: url(images/bg.gif);
background-repeat: repeat;
}

#container {
margin-left: auto;
margin-right: auto;
width: 90%;
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

h1, h2, h3, h4, h5, h6 {
font-size: 1.5em;
}


ul {
list-style-type: none;
margin: 0;
padding: 0;
}

p {
font-size: 0.81 25em;
font-family:
color:
}

a {
text-decoration: none;
}

img a {
border: none;
}

#header {
width: 100%;
}

#logo {
margin-left: auto;
margin-right: auto;
width: 163px;
padding-top: 50px;
padding-bottom: 30px;
}

.line {
border-top: 1px solid #e2e2e2;
}

#nav {
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 30px;
font-family: Arial;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border-top: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
}

#nav li {
float: left;
padding: 15px 20px;
color: #e2e2e2;
}


#nav li a {
text-decoration: none;
color: #e2e2e2;
}

#nav li a:visited {
text-decoration: none;
color: #e2e2e2;
}

#nav li a:hover {
text-decoration: none;
color: #fff;
}

#nav li a:active {
text-decoration: none;
color: #fff;
}

/* Main Content
----------------------------------------------- */

#slider {

}

.text {

}

#content {

}

#contentwrapper {

}

/* FOOTER
----------------------------------------------- */

#footer {
height:200px;
text-align:center;
position:relative;
left:70px;
padding-bottom:20px;
}
#footer img {text-align:center;}
#footer p {text-align:left;}

.footerblock {
width: 380px;
height: 155px;
margin-right: 28px;
float:left;
display:inline;

}

.footbox {
float:left;
}

.footerheading {
font-size: 14px;
color: #fff;
font-weight: bold;
width: 50%;
}

.footerfirstline {
color: #e2e2e2;
font-weight: bold;
font-size: 12px;
width: 50%;
}

.footertext {
color: #e2e2e2;
float: left;
font-size: 11px;
width: 40%;
text-align: justify;
}

.footermore:before {
float: left;
color: #a04b2c;
text-align:center;
content: "Read more >>";
font-size:11px;
position:relative;
left:-63px;
top:95px;

}

img.footerimg {
/* width: 90px;
height: auto; */
position: relative;
top: -60px;
margin-left: 15px;
}

#social {
width: 110px;
height: 155px;
}



HTML



<html xmlns="http://www.w3.org/1999/xhtml" <head=""><head><title>FASHION DISTRICT | HOME PAGE</title>
<meta name="keywords" content="">
<meta name="description" content="">

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

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><style type="text/css"></style>

<script type="text/javascript" src="jquery.cycle.all.min.js"></script>

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

</head>

<body>
<div id="wrapper">
<div id="container">

<header id="header">
<div id="logo">
<img src="images/logo.png" alt="">
</div></header>

<!-- NAVIGATION -->
<div class="line"></div>
<nav>
<ul id="nav">
<li><a href="home.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="events.html">events</a></li>
<li><a href="stores.html">stores</a></li>
<li><a href="apartments.html">apartments</a></li>
<li><a href="fashion.html">fashion</a></li>
<li><a href="partners.html">partners</a></li>
<li><a href="contact.html">contact</a></li>
<div class="line"></div>
</ul>
</nav>

<div class="line"></div>
<!-- MAIN -->
<article>
<div id="contentwrapper">
<div class="gallery">
<ul class="slideshow">
<li><img class="img_grayscale" src="images/slide1.png" alt=""></li>
<li><img class="img_grayscale" src="images/slide22.png" alt=""></li>
<li><img class="img_grayscale" src="images/slide3.png" alt=""></li>
<li><img class="img_grayscale" src="images/slide4.png" alt=""></li>
</ul>
</div><!-- gallery -->

</div><!-- contentwrapper -->
</article>

<!-- FOOTER -->
<div class="line"></div>



<div id="footer">
<div class="footerblock">
<div class="footbox">

<h4 class="footerheading">AUTUMN COLLECTION</h4>

<p class="footerfirstline">Lorem ipsum dolor sit amet</p>

<p class="footertext">Cupidatat excepteur ea dolore sed in adipisicing id? Nulla lorem deserunt aliquip officia reprehenderit fugiat, dolor excepteur in et officia ex sunt ut, nulla consequat.

</p><div class="footermore"> &gt;&gt;&gt; </div> <p></p>

<img class="footerimg" src="images/foot_img2.png">
</div>
</div><div class="footerblock">
<div class="footbox">

<h4 class="footerheading">SUMMER COLLECTION</h4>

<p class="footerfirstline">Lorem ipsum dolor sit amet</p>

<p class="footertext">Cupidatat excepteur ea dolore sed in adipisicing id? Nulla lorem deserunt aliquip officia reprehenderit fugiat, dolor excepteur in et officia ex sunt ut, nulla consequat.

</p><div class="footermore"> &gt;&gt;&gt; </div> <p></p>

<img class="footerimg" src="images/foot_img1.png">

</div>
</div>
</div>


</div><!-- container -->
</div><!-- wrapper -->

<div id="--tcd-overlay" style="text-align:center;background-color:#000000;color:#FFFFFF;opacity:0.8;position: absolute;left: 0px;right: 0px;display: none;-webkit-box-shadow: black 0px 0px 5px;border-bottom-left-radius: 7px 7px;border-bottom-right-radius: 7px 7px;border-top-left-radius: 7px 7px;border-top-right-radius: 7px 7px;width:250px;height:auto;font-size:10px;padding:15px;z-index:999"></div></body></html>

gingerbread
07-29-2012, 06:59 PM
<div id="--tcd-overlay" style="text-align:center;background-color:#000000;color:#FFFFFF;opacity:0.8;position: absolute;left: 0px;right: 0px;display: none;-webkit-box-shadow: black 0px 0px 5px;border-bottom-left-radius: 7px 7px;border-bottom-right-radius: 7px 7px;border-top-left-radius: 7px 7px;border-top-right-radius: 7px 7px;width:250px;height:auto;font-size:10px;padding:15px;z-index:999"></div>

Hey there, Thanks a million your code worked. Awesome!!!! :)

gingerbread
07-29-2012, 09:48 PM
Oh, dear. Now my footer is under my slideshow after I activated the jquery. I have tried playing around with absolute/relative positions on the slideshow, clear ... any ideas? Thanks :)

tempz
07-30-2012, 03:54 PM
Can you activate it for me, so I can see?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum