CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Amir
Amir

Reputation: 78

Sections overlapping with Bootstrap 3

I'm creating a bootstrap template and I'm having a problem.

The section id="content-one" shows up on the top of the page. It doesn't seem I can find a solution for this to place it under the full-screen header.

Needs to be positioned here: pic

Here is the code: http://codeply.com/go/8iYGenpntB

Upvotes: 1

Views: 98

Answers (1)

hungerstar
hungerstar

Reputation: 21725

The problem is that elements within <section id="hero"> are absolute positioned, which take them out of the normal document flow and other elements will ignore their positioning on the page (i.e. pretend they're not there). That is why <section id="content-one"> is above the "main header", i.e. <section id="hero"> content. The elements that have absolute positioning are .hero-wrapper and .hero-container.

I'm not sure what the final layout should be or the requirements upon it so it's hard to recommend much beyond pointing out the source of the issue. You could possibly use padding and margin only to get <section id="hero"> the height/size you'd like.

Upvotes: 1

Related Questions