How to create footers in CSS


Tags: html,css

Problem :

I started learning CSS, HTML, and other cool stuff a day ago. I really don't understand why my footer isn't working.

Can you help me to solve my problem, tell me what I'm doing wrong, or just tell me, that I should go play tetris?

jsfiddle

HTML CODE :

<title>MyDotCom</title>
<body>
  <div id="header">My awesome page title, logo, etc.</div>
  <div id="left">Navigation menu</div>
  <div id="bar">Random bar, lol.</div>
  <div id="footer">Coded by: me</div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
  </div>
</body>

CSS CODE :

#header {
  border-radius: 5px;
  background-color: #C6E2FF;
  width: 100%;
  height: 100px;
  position: relative;
  margin-top: -10px;
  margin-bottom: 10px;
}
#bar {
  border-radius: 8px;
  background-color: #6E4005;
  width: 90%;
  height: 40px;
  float: both;
  margin-left: 10%;
  position: relative;
  z-index:1;
}
#left {
  float:left;
  background-color: #F6C483;
  margin-bottom: 10px;
  width: 20%;
  height:400px;
  position: relative;
  z-index: 2;
}
#content {
  position: relative;
  float: right;
  width: 80%;
  height: 360px;
  background-color: #F4EBC3;
  margin-bottom: 10px;
}
#footer {
  background-color: #B0B0B0;
  position:absolute;
  clear:both;
  height: 30px;
}

I tried to change position:absolute; to position:relative;, but it didn't work.

It's difficult to ask you for help, because probably it is really simple, but I tried, and tried, and have no idea what to do.



Solution :

What about removing position: absolute; and moving your footer below content in html?

modified code


    CSS Howto..

    How to add a hiding delay to Full CSS Dropdown Vertical Menu

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    How to draw a circle css

    How to make the contents of a div not wrap?

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    How to solve buggy line-height on input fields?

    How do change CSS Class from Code Behind?

    How to make a transparent border using CSS?

    JQuery Animate() showing sticky behaviour with other elements in the same class

    How to make “transbox” full width

    How to change border of div containing radio button when checked

    How to put logo on navigation bar

    How to align images and unordered list

    How to set Height of a table in a Bootstrap as the value of Width using CSS?

    How come one of my columns in bootstrap is not functioning properly?

    How to remove space between bannner and content in wordpress theme?

    How can I apply jQuery .css style to descendant div [closed]

    How to combine components in HTML header

    ASP.NET MVC: How do other people apply conditional CSS classes?

    How to target CSS link with JavaScript

    How can I make the side elements spin on the x-axis in this animation?

    How can I separate areas with floats from each other?

    How to set p margin for a section

    How can I make responsive JQuery left margin?

    How to create a header.php and footer.php with CSS files?

    How does this wheel menu get the name

    How do I fix Zurb Foundation dropdown issue on mobile devices?

    How to align logo and text in bootstrap on small screens?

    How to display a div over other content and in the center of webpage using CSS?

    show different content in multiple css popups