-1

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!

H Sturma
  • 301
  • 4
  • 17
  • Please be more specific and narrow down your problem as minimum as possible to get real kind of help – bugwheels94 Jul 24 '16 at 23:12
  • @user1533609 I've made edit with some code. I need to have containers with changeable top margin and height – H Sturma Jul 24 '16 at 23:15
  • I don't understand. Do you know the basics of the html flow? Putting your 100% width container at the top with a min-height of 20% (of its parent, whatever that is, probably ?) would allow it to expand as you put more content in it. It is not clear to me why you are using absolute positioning in the first place. – Matt Broatch Jul 24 '16 at 23:17

3 Answers3

1

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.

Joundill
  • 6,828
  • 12
  • 36
  • 50
  • When I am setting all containers like at example in the code I wrote here, when text is longer than set height, it doesn't display at full size, because top margin of next container covers it. – H Sturma Jul 24 '16 at 23:16
0

I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.

Ditch the position property altogether.

Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.

Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .

Matt Broatch
  • 710
  • 4
  • 16
  • it works with positioning! but now background covers only space with content, but not the rest of div's height as it does with position absolute. How could I fix this please? (sorry for such basic questions) – H Sturma Jul 24 '16 at 23:28
  • It works with what positioning? Relative? Did you mean "without positioning"? Neither your code nor question mentions any background; is that the only problem now? If so, update your question so we can see what's going on. I set background colors on all the divs, and none of them overlap when I ran the code you provided. – Matt Broatch Jul 24 '16 at 23:41
0

You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen). I added the background-color just so it's easier to see. 

<style>
#header {
    background-color: #777;
    height: 20vh;
}
#main {
    background-color: #999;
    height: 80vh;
}
#about {
    background-color: #777;
    height: 100vh;
}
#contact {
    background-color: #999; 
    height: 50vh;
}
</style>
Andre OBrien
  • 160
  • 1
  • 11