Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
sushil kumar
4,385 PointsHow to make footer to be in bottom,so that it does not go over the section elements?
Html code:
<!DOCTYPE html>
<html>
<head>
<title>susheel kumar</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div class="wrapper">
<header class="main-header">
<h1 class="main-logo"><a href="#">Logo</a></h1>
<ul class="main-nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</header>
<div class="extra">
<h1>Hello I M New</h1>
<p>This chapter reviews some basic concepts relating to data</p>
</div>
<div class="primary-content col">
<h2>Primary Content</h2>
<p>This chapter reviews some basic concepts relating to data marts and establishes some
working definitions for use in the rest of this book. Although there is a lot of agreement
among users and vendors on the definitions and terminology, they have not yet reached complete
consensus. If you talk to a dozen people, you are likely to hear about half a dozen similar but
slightly differing answers for even something as basic as "What is a data mart?" This chapter
takes a quick look at some definitions and explains what a data mart is (and is not).
</p>
<p>There are two basic types of data marts: dependent and independent.
The categorization is based primarily on the data source that feeds the data mart.
Dependent data marts draw data from a central data warehouse that has already been created.
Independent data marts, in contrast, are standalone systems built by drawing data directly from
operational or external sources of data, or both.You’ve seen it before…the acronym “LION” proudly displayed on a LinkedIn member’s headline. What does it mean? Should you become a LION?
The acronym L-I-O-N stands for LinkedIn Open Networker.
LIONs are LinkedIn members open to networking with everyone, previously known or not.
The LION generally accepts every invitation request to connect or, at the least, will not click
the “I Don’t Know” button in response to an invitation.
Wikipedia provides a bit of history: “The LIONs was founded by
Christian Mayaud in January 2006. Christian was
quickly joined by like-minded John L. Evans from the United Kingdom,
and between them they rapidly established the LIONs Group on Yahoo.
John L. Evans applied to LinkedIn for a Badge of re
</p>
</div>
<div class="secondary-content col">
<h3>Secondary Content</h3>
<p>My name is susheel I am not know what to do the world is blind to me and I fucking don't care about anayone
this is what I do so please let me know if I am wrong.
</p>
<hr>
<p>Hello again so where I am I don't care where I am the thing we are suppose to help others and we should
do it often
</p>
</div>
<footer class="main-footer">
<p>©example 2016</p>
</footer>
</div>
</body>
</html>
CSS:
/***********************
GENERAL
***********************/
/*removing margin fargin from idhar udhar if there are*/
*
{
box-sizing:border-box;
}
body
{
font:normal 1.1em/1.5 sans-serif;
background-color:#edeff0;
color:#222;
}
/*setting height to look good*/
html,body,.wrapper,.col
{
height:100%;
}
/* Applying background to all */
.main-header{ background-color:#5fcf80}
.main-logo{background-color:#454545}
.main-nav li{background-color:#3f8abf}
.primary-content{background-color:#f0fff0}
.secondary-content{background-color:#b695ed}
.main-footer{background-color:#1e90ff}
/***********************
HEADER
***********************/
/*making header to like a table*/
.main-header
{
display:table;
width:100%;
min-height:150px;
}
/*setting the width to some margin to left and right*/
/*.wrapper
{
width:90%;
margin:auto;
}
/*removing text decoration of the anchor*/
.main-logo a,.main-nav li a
{
text-decoration:none;
color:white;
display:block;
padding:10px 20px;
text-align:center;
}
/*applying padding to the header so that full the top margin*/
.main-header
{
padding:20px;
}
/*making the logo and ul and li to inline element*/
.main-logo,.main-nav,.main-nav li
{
display:inline-block;
}
/*applying radius to all of them logo as well as the links*/
.main-logo,.main-nav li
{
border-radius:5px;
}
/*making default margin of the logo header to 0*/
.main-logo
{
margin-top:0;
margin-bottom:0;
width:120px;
}
/*applying margin of 10 to all side of the list item*/
.main-nav li
{
margin:10px;
}
/*making logo as well as the all the list item in one as the to stay in the table two column*/
.main-logo,.main-nav
{
display:table-cell;
vertical-align:middle;
}
/* making header for the small devices*/
@media (max-width:500px)
{
.main-logo,.main-nav,.main-nav li{
display:block;
width:initial;
margin:initial;
}
.main-nav li
{
margin-top:15px;
}
}
/******************************
COLUMN
******************************/
/*giving and setting the both paragraph element*/
.col
{
display:inline-block;
margin-right:-5px;
padding:20px;
vertical-align:top;
font-size:0.8em;
}
/*setting the width */
.primary-content
{
width:60%
}
/*setting the widht*/
.secondary-content
{
width:40%;
}
/*************************
FOOTER
*************************/
.main-footer
{
text-align:center;
padding:20px;
}
/*giving some added something*/
.extra
{
text-align:center;
padding:20px;
}
2 Answers
rydavim
18,814 PointsYou can use a combination of this sticky footer css and this equal columns css.
You'll need to restructure your html a little bit, and add some css. I've posted an example below, but you may need to modify it to get exactly the style you want.
<div class="containerOne">
<div class="containerTwo">
<!-- Your column tags go inside here. -->
</div>
</div>
<div class="push"></div> <!-- This needs to be inside your wrapper div tag. -->
<div class="footer">
<!-- Your footer tag goes inside here. -->
</div>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
clear: both;
}
.containerOne {
clear:left;
float:left;
width:100%;
overflow:hidden;
background-color:#b695ed /* Secondary Content Color */
}
.containerTwo {
float:left;
width:100%;
position:relative;
right:50%;
background-color:#f0fff0 /* Primary Content Color */
}
.primary-content {
float:left;
width:60%;
position:relative;
left:52%;
overflow:hidden;
}
.secondary-content {
float:left;
width:32%;
position:relative;
left:56%;
overflow:hidden;
}
Happy coding!
Mattea Turnbull
4,134 PointsI haven't put your code into a browser, but I would try two things:
Putting a display:block; and clear:both; into your css as attributes of footer:
footer{ display:block; clear:both; }
rydavim
18,814 Pointsrydavim
18,814 PointsI've added a bit more formatting to your code blocks to make them easier to read. You can do this using the following markdown:
```language
your code here
```