Div Elements Overlapping Each Other

div elements overlapping instead of aligning vertically

Just change position:absolute to position:relative

DIV elements overlapping each other

You'll first need to remove the position: absolute and then using display: inline-block does the trick no problem.

Working example

.orange,
.yellow {
  display: inline-block;
}

Perhaps you were applying this CSS rule somewhere else in your attempts? Or perhaps keeping your position: absolute?

How can I stop div/elements overlapping in this case?

The main reason for the overlapping elements is because you're floating an element (article.description__text) inside an element (section#whoami) which is not floated.

If you're using floats to layout your page, you need to use float on all your elements. A more modern way to layout your page would be to use flexbox.

HTML overlapping div elements

I'm not sure this is exactly what you're going for, but if you add padding to the top of the wrapper, you can offset the child element.

#wrapper {  background-color: green;  padding-top: 50px;}
#parent {  width: 500px;  height: 400px;  border: 4px solid blue;  background-size: cover;}
#child {  width: 300px;  height: 200px;  border: 3px solid red;  position: relative;  top: -50px;  left: 80%;}

<div id="container">  <div id="wrapper">    <div id="parent">      <div id="child">        This is my overlapping Text      </div>    </div>  </div></div>

Why is my div overlapping other divs?

You need to change all the position: fixed; to position: relative; for elements that can be resized when the screen size changes. fixed maintains the <div> tag's starting position and can grow and shrink from there. So, when you shrink to a mobile screen, the size of the text you have causes the <div> that contains them to resize and overlap the the next <div>. When you change the position to relative, the <div>'s are placed in order, and if something causes the <div> to be resized, then the <div>'s that follow it are adjusted and prevent overlapping.

You can see it fixed with the edited fiddle: http://jsfiddle.net/57PQm/78/

Elements overlapping each other when resizing the window

Instead of using bootstrap here, I would use flex

I'd use this HTML

  <div id="header-container-nav">
    <div">LOGO</div>
    <div>LOGIN BUTTONS</div>
    <div>MENU</div>
    <div>LANGUAGE</div>
  </div>

and this CSS

#header-container-nav {
  display: flex;
}

And now you can adjust the size of each item (check out this article http://javascriptkit.com/dhtmltutors/css-flexbox2.shtml)

Div content overlapping each other

Try this CSS:

#page1, #page2 {
    position:relative;
    float:left;
}

... it isn’t, by any means, a nice solution ... but it solves the problem with things overlapping.

Overlapping elements in CSS

the easiest way is to use position:absolute on both elements. You can absolutely position relative to the page, or you can absolutely position relative to a container div by setting the container div to position:relative

<div id="container" style="position:relative;">
    <div id="div1" style="position:absolute; top:0; left:0;"></div>
    <div id="div2" style="position:absolute; top:0; left:0;"></div>
</div>

Div is overlapping one another

Section overlaps because you have applied position: absolute on jumbotron. Elements with absolute or fixed are taken out from the normal flow of DOM so they overlap with other elements. You can set your navbar with position: absolute rather than jumbotron and it will work.

Sample Code

<nav class="navbar">
     // navigation
</navbar>
<div class="jumbotron">
    // jumbotron
</div>
<div class="next-section">
    // next section
</div>

body {
    position: relative;
}

.navbar {
    position: absolute;
    z-index: 10;
    right: 0;
    left: 0;
    top: 0;
}

.jumbotron {
    height: 100vh;
    width: 100%;
}

.next-section {
  // styling will go here...
}

I've updated your code, have a look at it. You can play with css to make it exactly according to your needs. Link

Why are these two elements overlapping? CSS issue

It is because you have both of those elements as position: absolute;. You can fix it by removing. Update your CSS to be this:

Edit: For your information as well, position lets you reposition elements within certain contexts. position: absolute; positions an element from the top left of the page, or if its parent has position: relative; then from that element instead. position: relative; repositions something from its initial position.

You then use top, left, right, or bottom, to choose how to reposition the item.

#titlesection {  height: auto;  width: 100%;  margin: auto;  padding: 0px;  margin-top: 25px;  margin-bottom: 25px;  position: relative;  display: block;}
#contentdiv {  top: 0;  left: 0;  width: 97%;  margin: auto;  height: 100%;  position: relative;  display: block;}
#title {  padding-top: 50px;  text-align: center;  font-size: 60px;  letter-spacing: 6px;  display: block;  margin-bottom: 1%;  height: auto;}
#titlesubheading {  margin-top: 10px;  margin-bottom: 10px;  font-size: 30px;  text-align: center;  letter-spacing: 7px;  display: block;  height: auto;}
#socialmedia {  width: 97%;  display: block;}
#smtable {  width: 10%;  float: right;}
#aboutheader {  width: 95%;  margin: auto;  margin-top: 5%;  padding: 10px;  font-size: 30px;  display: block;  position: static;}
#about {  width: 95%;  margin: auto;  margin-top: 1%;  padding: 0px;  height: auto;  font-size: 20px;  display: block;}
#abouttext {  width: 60%;  height: auto;  display: block;  margin-left: 10px;  min-height: 140px;}

Div Elements Overlapping Each Other

div elements overlapping instead of aligning vertically