Web Development 101 - Div Positioning

And so welcome to this part of our tutorial, the <div> positioning. We are going to play a bit with our <div> and I assure you this would be fun and very helpful to learn. Open your text editor and copy and paste this code,.. save (of course).

Open your html document on your browser and you should be having something like the one below:

Have you gotten it?

Sorry for surprising you with such a bunch of codes. To make it up to you, let me tackle things one by one, relax  :)

POSITION: FIXED

On your code, take a look on this part:

<div style="position:fixed; background-color:yellow; margin-top:5%; padding:5px;">
 <h2>This is a fixed div</h2>
</div>
<div style="position:fixed; background-color:green; margin-top:10%; margin-left:80%; padding:5px;">
 <h2>This is another fixed div</h2>
</div>

Notice we have taken advantage of the attribute "style" of our div tag. This is where we define our inline CSS (we'll cover a different in depth tutorial regarding CSS).

As per the above codes, notice that we have "position: fixed;" on both <div> tags. A `fixed` position is used when we want our div to be fixed on a particular area on our webpage. Notice that on your browser, there are two divs that are not moving along as you scroll down your webpage. Those are the two fixed <div>s.

POSITION: ABSOLUTE and POSITION: RELATIVE

<div style="border:solid; width:800px; margin-left:auto; margin-right:auto; padding: 10px; ">
 <div style="position: absolute; width: 240px; background-color: yellow;">
  This is a div with an absolute position without a <u>parent div with a relative position</u>
 </div>
...
</div>

I'm sure it's on the code I gave you. On this part I have a <div> with a position: absolute. A <div> with an absolute position takes the size of its parent container. Here's the golden rule with regards to <div>s with absolute positioning:

If an absoluted <div> does not have any existing parent container, or a container with a position:relative, it will appear on the top of our page taking its position from the main page container or body of our page. There are other samples of <div>s with position:absolute in our code. Take a look and spot the differences.

We have something like the one below as well:

<div style="background-color: green; position:relative; width: 100%; height: 20%;">
 This is a div with a relative position
 <div style="position: absolute; top: 50px; left: 3px; width: 240px; background-color: yellow; height:50%;">
  This is a div with an absolute position
 </div>
 <div style="position: absolute; top: 50px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border;">
  This is a div with an absolute position (but with no height)
 </div>
</div>

These <div>s are the ones with position:absolute inside a parent <div> with a position:relative. The absoluted <div>s took the position where our relatived <div> is located.

Meanwhile, in our code below, we have a <div> with a position:relative (This snippet is also in our html file, please look at it, it should be there). Notice that we have floated this <div> into the right. This is the pink <div> on the right of another pink <div> which has contents of "This is a floated div with a relative position"

<div style="position: relative; float: right; width: 140px; height: 70px; margin-right: 3px; background-color:pink;">
 This is a <b>floated</b> div with a relative position
</div>

Inline with this <div> on its left part is another <div> which has a code like the below:

<div style="position: relative; width: 140px; height: 70px; margin-right: 3px; background-color:pink;">
 This is a regular div with a relative position
</div>

Pay very close attention to what I am going to say:

We have two pink <div>s aligned with each other. You see that?[YES][NO]
The one is on the left with a content "This is a regular div with a relative position". [YES][NO]
The other one is on the right with a content "This is a floated div with a relative position".[YES][NO]
Looking on the arrangement of our code, the first one to appear on our editor is the floated relative <div>, then there comes the regular relative <div>. [YES][NO]

Why is it that even the floated one is coded out first, the regular one is the <div> to appear on the left side of the floated <div> making it aligned to each other?

It is because, the floated <div>'s width have taken enough space for its content leaving the untaken part availble for other elements to fill in. And so the next `technically` available element (which is our regular <div>) fills in.

More for position:relative

<div>
 <div style="position: relative; float: left; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border">
  position: relative; float: left; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
 </div>
 <div style="position: relative; float: left; width: 240px; background-color: orange;">
  position: relative; float: left; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border
 </div>
 <div style="position: relative; float: left; width: 210px; height: 125px; background-color: yellow;">
  position: relative; float: left; width: 210px; height: 125px; background-color: yellow;
 </div>
 <div style="clear:both;"></div>
</div>

This is just an additional example of <div>s with position: relative. Notice that it is all floated in left and have bonus <div>: <div style="clear:both;"></div>. 

These three inline <div>s are bound to show up 'inline' since they have widths summed up together that fits inside the full length of their parent container. Having the bonus <div> with `clear: both;` style will make the unused available space unavailable to be filled by the next element that could fit it inside the unused space. Try removing `<div style="clear: both;"></div>` and see what happens.

Others

The `Lorem ipsum...` thingy are just additionals in our sample code. You may replace anything you want in it.

Summary

So as far as what we have tried, we have used the following positions

• relative
• absolute
• fixed

So, have I made it up to you? If you still have questions, violent reactions or any additionals with regards to this article, please feel free to comment. I will surely address the issue the soonest possible. Happy coding!