csspositionsinglepage

Single page web without absolute position

is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.

Now my css looks like:

        <style>
        #header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
        #main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
    #about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
    </style>

    <body>
    <div id="header">
    content....
    </div>

    <div id="main">
    content...
    </div>

    <div id="about">
    long content which is covered with next div, because its "top" atribute settings
    </div>

<div id="contact">
div which covers previous one's end
</div>

But when some container needs to be longer, problem is here..

Thanks for any help!

Solution

  • That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.

    My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.

    It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.