CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Uzer
Uzer

Reputation: 187

Div is overlapping one another

overlapping

I'm trying to add another section under the jumbotron but it overlaps jumbotron for some reason..

Here is my code

http://www.bootply.com/IUd0GWEuAn

Upvotes: 0

Views: 2045

Answers (3)

Mohammad Usman
Mohammad Usman

Reputation: 39322

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

Upvotes: 2

Umer Hayat
Umer Hayat

Reputation: 35

The jumbotron is the class of boostrap having impact on the text you should also have to assign the columns to occupy for defining its width.assign col-lg-12 or row with jumbotron class to the wrapper div.

Upvotes: 0

user3860822
user3860822

Reputation: 36

Try placing <div style="clear:both"></div> right after the upper bar.

Upvotes: 0

Related Questions