my first question here, I am new to html/css so bear with me if this sounds too noobish of a question. I don't have any code so ill explain with words instead because the problem itself is simple but I cant figure out a solution right now.
When you position an element using position:relative; it moves from the place that it normally would have been at, to the specified coordinates, correct?
Now if you have many elements in normal flow and they take up let say 2000px of height together, and i want to position all those elements in a div [1000px x 1000px], so i move them in positions using position relative, all is fine and dandy, except that the page is still 2000px, even though I have moved the elements, how to solve this, is there 1 or more methods of achieving this.
Edit: Maybe It's confusing what i meant, Here is an example in code so you guys can see more clearly. Now i got those divs where i want them, but under them, i guess you can say their initial position is still there and creates a scroll.
<html>
<head>
<style>
#one{
border: 1px green solid;
height: 500px;
width: 20px;
}
#two{
border: 1px black solid;
height: 500px;
width: 20px;
position: relative; top: -502px; left: 100px;
}
#three{
border: 1px red solid;
height: 500px;
width: 20px;
position: relative; top: -1004px; left: 200px;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
If you want to constrain all elements within our div, you can use overflow:hidden
HTML
<div id="elementsinadiv">
<div class="myelement">Some stuff</div>
<div class="myelement">Some stuff</div>
<div class="myelement">Some stuff</div>
<div class="myelement">Some stuff</div>
</div>
CSS
#elementsinadiv{
height: 100px;
width: 200px;
background-color: blue;
overflow: hidden;
}
.myelement{
position: relative;
display: block;
height: 50px;
width: 100px;
border: 1px solid red;
background-color: #f3f3f3;
}