Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Footer not staying in main wrapper div

    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

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    I think this should fix your problem

    CSS:

    Code:
    /* 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

    Code:
    <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>

  • Users who have thanked tempz for this post:

    gingerbread (07-29-2012)

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <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!!!!

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #5
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Can you activate it for me, so I can see?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •