CODEWITHSUNDEEP
htmlcss
spike.y
spike.y

Reputation: 399

Is it possible to unbreak document flow after using position:absolute (or best alternative)?

I have been struggling to come up with a good solution for centering a div. I don't like messy html, and I don't like having 2 or 3 unnecessary div's just for the sake of centering something. So I decided to use position:absolute.

Now I know that position:absolute breaks the flow of the document, and this is why this is happening, but is there a way to "unbreak" the flow of the document?

Right now, I have a div with 100% width, 20% height and vertically-centered. This div contains a paragraph and I have another paragraph element at the bottom of the page (outside of this div) - but because I am using position:absolute, the copyright notice appears before the div.

Is there a way we can get our document back to normal flow. I don't want to have to resort to setting margin-top: npx; to every single element on the page that appears after the div.

JSFiddle:

HTML:

<div id="container">
    <p>Hi lol</p>
</div>
<p>Copyright Notice here</p>

CSS:

*
{
    outline: none; outline: 0; border: none; border: 0; margin: 0; padding: 0;
}

#container
{
    width: 100%;
    height: 20%;

    position: absolute;
    left: 0%;
    right: 0%;
    top: 40%;
    bottom: 40%;

    background-color: khaki;
}

p
{
    text-align: center;
}

Upvotes: 0

Views: 35

Answers (1)

konghou
konghou

Reputation: 557

also set your copyright paragraph to absolute bottom.

p { position: absolute; bottom: 0px; /* or any appropriate position */ }

Upvotes: 1

Related Questions