Reputation: 3

Footer Div is in wrong place

I can't figure out if my CSS is out of order, or if I'm coding the footer div wrong, but I have an error. The problem that I have is that the div id="footer" ends up starting at my navigation bar, and now I'm unable to modify the footer size.

@charset "utf-8";
/* CSS Document */

/* CSS Reset */

	/* http://meyerweb.com/eric/tools/css/reset/ 
	   v2.0 | 20110126
	   License: none (public domain)
	*/
	
	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, 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,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
		text-align:center;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

/* End CSS Reset */

/* Temporary Style for Testing 
* {
	border:#FFFFFF 1px dashed !important;
}
 End Temporary Style for Testing */

/* Layout CSS Rules */




#container {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 1008px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	background-image: url(../images/containerbackground.jpg);
	height: 100vh;
	
}
#header {
	width: 1008px;
	height: 123px;
	background-image: url(../images/Header.jpg);
	display:inline-block;
	margin: 0 auto;
	background-repeat: no-repeat;
    
        
		
        
}
#logo {
	width: 236px;
	height: 80px;
	float: left;
	margin-top: 15px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 25px;
	
}
#navBar {
	width: 1008px;
	height: 43px;
	float: left;
	
}
#navBar .navButtons {
	width: 252px;
	height: 43px;
	float: left;

}


 

#textContent {
	width: 706px;
	height: 495px;
	float: left;
	padding-right: 0px;
	color: #000066;
	text-align: left;
	padding-bottom: 15px;
	
}


#textContent h1 {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	color: #000066;
	text-align: center;
	padding-bottom: 10px;
}



#imageContent {
	width: 254px;
	height: 250px;
	float: left;
	padding: 20px;
	img.center{
    text-align: center;
    margin: 0 auto;
    padding right:48px;
}



/* End Layout Styles */

/*  Tag Selectors */
 
 
	
textContent p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
	font-weight:normal;
	color:#FFFFFF;
	line-height:20px;
	text-align: left;
}
#imageContent img {
	border:#333 solid 1px;
}

#footerContent {
	margin-left: 150px;
	padding: 0px;
	float: left;
	height: 58px;
	width: 1008px;
	
}	
	
 #
img {
	
}




#w3 img {
	border:0px;

<!DOCTYPE html>


<html>
<head>
	<meta charset="utf-8">
	
<title>Home Page</title>

		<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="screen" />
		<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<!-- Container for whole site-->
<div>
<div id="container">  
  <!-- Header Content -->
  <div id="header">
    <div id="logo">
	<a href="index.php" title="Link to home page"> <img src="images/logo.png" alt="logo"></a>
     </div>
	 </div>
	 
  <!-- End Header Content --> 
  
		<!-- Logo in header content -->
		
		<!-- End logo header content -->
		
  <!-- main Navigation Bar  -->
  <div id="navBar">
  <!-- main Navigation Bar List  -->
    <ul class="navBar">  
				
				<li><a href="about.php" title="about">About</a></li>
                <li><a href="news.php" title="news">News</a></li>
                <li><a href="events.php" title="events">Events</a>		
					<ul class="navBar">
						<li><a href="#.php"   title="#">page 1</a></li>
						<li><a href="#.php" title="#">page 2</a></li>
						<li><a href="#.php"  title="#">page 3</a></li>
					</ul> <!-- end portfolio submenu -->
				</li>			
				<li><a href="contact.php" title="Contact">Contact</a></li>
               
			
            </ul>
			<!-- End main Navigation Bar List  -->
		</div> <!-- End main Navigation Bar  --> 
 
  
  <!-- Image Content Area -->
  <div id="imageContent"><img src="images/textimage.png" alt="Image Placeholder">

        <!-- end image placeholder -->
        </div>
  

  <!-- End Main Content Area --> 
  
  <!-- Text Content Area -->
  <div id="textContent">
    <h1>Welcome</h1>
    <p>Thanks for viewing this website, I will past a recent news article as a place holder. OCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.

Photos sent to us by Christopher SurigaOCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.

Photos sent to us by Christopher SurigaOCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.

Photos sent to us by Christopher SurigaOCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.

Photos sent to us by Christopher Suriga  </p>
  </div>
 
  
  <!-- End Text Content Area--> 
  
  <!-- Footer Content -->
  
  <!-- Footer Navigation List  -->

  



<div id="footerContent">
			&copy; 2015 Created by Bounkong Sibounheuang
                <a href="contact.php" title="Contact Us">Contact Us</a>
                <a href="https://www.gliffy.com/go/publish/7665711" title="Site Wireframe">Wireframe</a>
                <a href="https://www.gliffy.com/go/publish/7596189" title="Sitmap">Sitemap</a>
                <a href="http://voo2do.com/pub/bounkongm6" title="Voo2Do">Voo2Do</a>
             
            <!-- End Footer Navigation List  -->
			
		 <!-- End Footer Content Area --> 
 </div> 
</div>




    <a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_html5.gif" alt="Valid HTML 5"></a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/valid-css.png" alt="Valid CSS"></a>
</div>	




<!--End container for whole site--> 

<!--W3C Code Validator Start-->
<!--W3C Code Validator End-->

</body>
</html>

Upvotes: 0

Answers (3)

FrontDev

Reputation: 847

First remove float:left from #textContent and add clear:both to #footerContent

In action: https://jsfiddle.net/uow5arbx/1/

Upvotes: 1

Bounkong

Reputation: 3

I've figured out the problem! My CSS was wrong for the #imageContent { width: 254px; height: 250px; float: left; padding: 20px; img.center{ text-align: center; margin: 0 auto; padding right:48px; }

I took out the img.center{ text-align: center; and then I modified my html file from

 </div> 
</div>




    <a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_html5.gif" alt="Valid HTML 5"></a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/valid-css.png" alt="Valid CSS"></a>
</div>

    <a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_html5.gif" alt="Valid HTML 5"></a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/valid-css.png" alt="Valid CSS"></a>
</div>
</div>

and this closed the div inside of my container

Upvotes: 0

Dejan.S

Reputation: 19118

Try removing float: left;

#footerContent {
    margin-left: 150px;
    padding: 0px;
    height: 58px;
    width: 1008px;
}

Upvotes: 0

Footer Div is in wrong place

Answers (3)

Related Questions