How to Stop These Divs from Overlapping

How to prevent divs from overlapping?

Please check the fiddle http://jsfiddle.net/6DtSS/5/
I've added clear:both to #homemidcontent
After you float the elements,you should clear it for the next element if it wants to sit right below.

Beginner's stuff: How to stop CSS' Divs from overlapping?

Here. You are applying a CSS rule to all the labels. The overlapping happens because of this rule.

float: left;

To fix this, remove the .form-nivel label rule and add these.

.form-nivel label:nth-child(1) {
    width: 160px;
    float: left;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: right;
}

.form-nivel label:nth-child(2) {
    width: 160px;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: right;
}

How do I stop these divs from overlapping?

Just remove the min-width from your CSS! And give min-width to the container with margin: auto to make it center.

Try this CSS:

#container{
    width: 70%;
    min-width: 1000px;
    margin: auto;
}
#left {
    float: left;
    width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}

Check out fiddle here: http://jsfiddle.net/UaqU7/2/

how to stop this div's from overlapping?

Just get rid off position:absolute in your main class:

.main {  height: 500px;  width: 100%;}
.filter {  background: red;  height: 100%;  float: left;  width: 20%;}
.post-bar {  background: blue;  height: 100%;  float: left;  width: 60%;}
.advertisment {  background: green;  height: 100%;  float: left;  width: 20%;}
.footer {  height: 250px;  width: 100%;  background: black;  position: relative;}

<div class="main">  <div class="filter">
  </div>  <div class="post-bar">
  </div>  <div class="advertisment">  </div>
</div><div class="footer"></div>

Prevent divs aligned from overlapping

Using absolute positioning is not a method for laying out things relative to one another. Flexbox or Grid are CSS methods for this.

Flexbox Method

#contentContainer {
  display: flex;
  justify-content: space-between;
  margin-top: 20%;
  width: 100%;
}

#contentOne,
#contentTwo,
#contentThree {
  border: 1px solid black;
  display: inline-block;
  height: 200px;
  width: 20%;
  max-width: 80%;
  min-width: 200px;
  text-align: center;
}

<div id="contentContainer">
    <div id="contentOne">
        <asp:LinkButton ID="ItemOne" runat="server" Text="Sample Item One"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemOne" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
    <div id="contentTwo">
        <asp:LinkButton ID="ItemTwo" runat="server" Text="Sample Item Two"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemTwo" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
    <div id="contentThree">
        <asp:LinkButton ID="ItemThree" runat="server" Text="Sample Item Three"></asp:LinkButton>
        <br />
        <asp:Label ID="txt_itemThree" runat="server" Text="Sample Item Description"></asp:Label>
    </div>
</div>

Prevent Overlapping div's in CSS

Don't use absolute position for the main div. Use a relative and add margin to it:

<div class="main" style="position: relative; margin-top: 60px; margin-left: 210px;">
    <?php $tpl->Component (); // this outputs tables of data ?>
</div>

How to prevent divs from overlapping with another div on resizing?

You can use display:flex with flex-wrap to achieve what you want:

.App {
  font-family: sans-serif;
  text-align: center;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 30px;
}

.card {
  box-sizing: border-box;
  width: calc(33.3333% - 20px);
  padding: 30px;
  height: 90%;
  background-color: aqua;
  min-width: 250px;
}

<div class="grid-container">
  <div class="card">
    <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </span>
  </div>
  <div class="card">
    <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </span>
  </div>
  <div class="card">
    <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </span>
  </div>
  <div class="card">
    <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset",
  "orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. </span>
  </div>
</div>

Prevent Divs From Overlapping In Responsive Layout

The answer is not to use a percentage for your headline. The simplest solution is to use the calc value, which can be used in all modern browsers.

The following will work:

div.storyWrapper {
    width: calc(100% - 114px);
    float: right;
}

Here, I have noted that the width of the image is 114px, and set the width of the container to 100% minus that.

I have also floated the container to the right.

Note that calc is a little bit fussy. In particular, you need spaces around the - operator: calc(100%-114px) will not work, at least not in all browsers.

Stop div from overlapping

You are trying to include your header file after </body> tag. include the <?php include 'includes/footer.php'; ?> footer withing your <body> tags

<?php
  session_start();
  ?>
<html>
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <title>
    Shadey Process
  </title>
  <body>
    <?php
      include 'includes/header.php';
      include 'includes/navigation.php';
      ?>
    <div class="body">
      This is the body.
      Due to errors beyond my control everything I had worked so hard to do is gone.
    </div>
    <?php
      include 'includes/footer.php';
      ?>
  </body>
</html>

Updated (after read Mike's comment)

if still doesn't work this.i think problem is in your footer.php please post your footer.php here or put this code line to your footers div

<div class="container-fluid" style="bottom:0; position:fixed;">