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!

Web Development 101 - Div tag

Here's one of my personal favorites, the <div> tag.

The <div> tag defines a section or division on a webpage. 

They group elements: check!

They add life to our webpage: check!

They will make our webpage pleasing to the eyes: check!

<div> tag is so powerful in such a way that familiarity and expertise in playing with this will make you a web design expert. This is what we use to define how we want our webpage to be seen by others (That is how I personally define <div> for me)

Let us dig deeper with this tag. Brace yourselves, for this series is a bit detailed, though I really find these things interesting and worth it to learn.

This is how a coded <div> tag will look like:

<div style="color:yellow">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>

[credits for hilite.me website for free code snippet formatting service]

And the output will look like this:

Let us start first with what we have just coded:

<div></div> - This is the opening and closing tag. All defined inside the opening and closing tag are part of that particular section

<h3></h3> - This is the opening and closing tag header tag. Well, this isn't particularly part of the <div> tag because this is a different tag, so as with the <p></p> tag.
style="color:yellow" - do you notice this attribute inside the <div> tag? This is the `style` attribute which can also be present in other html tags. For this instance, in particular, we have used the `style` attribute to format the elements inside our defined <div> tag. 
Try this one:


<div style="color:yellow">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>

<div style="color:blue">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>




... save the html file and open it on your browser. You should get something like this.



Notice that on our second <div>, we have indicated this: style="color:blue". Which means, whatever element style applicable for this attribute to be applied, it must have the color of blue: in our case, the text color became blue.



We already have two <div>s here: the first one with the yellow text color and the second one with the blue text color.



Would you like to see how your div actually looks like? Let us make its borders visible: Tweak your code to this:



<div style="color:yellow; border: solid black;">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>

<div style="color:blue; border: solid black">


  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>





Assuming that you're still not closing the browser where you opened our html file, refresh the page. Did you get something like this?




That is how your <div> looks like on your webpage. See the border lines? It is the space that our <div>s occupy in our webpage.



I have mentioned that <div> tag is so powerful that it defines how our elements are arranged in our webpage, to make the term simpler, the layout: and I'm standing for it. But first, let us talk about <div> positioning.

Web Development 101 - Button tag

Buttons.

As plain as you have read it, they are buttons.

For formality sake, what is the definition of an HTML button?

The button tag represents the clickable buttons in our webpage (though we may also want to take advantage of the <input type="submit" /> or <input type="button" /> tags which will be covered sooner on this series).

Without further ado, this is what a standard button would look like.



which has the following code:

<button>TRY TO CLICK ME</button>

Now, on your text editor, just type the codes above and save it as: button.html

Now, navigate to your saved html file and open it on your browser. You should have a page with a button same looking as the one created above

*Note that nothing happens yet when we clicked that button. As we move onwards, we will be taking advantage of its attributes in order to add life to this boring button. Speaking of attributes, below are some of the attributes of the <button> tag.

• name
• id
• disabled
• form (HTML5)
• formaction (HTML5)
• formenctype (HTML5)

Please get a hold of yourself and pardon for mentioning the HTML5 thing on this part. A button is just the same with other elements which share common attributes: id,class,name. However, to kickoff something new in our readings, I added HTML5 attributes. From the very beginning of this series, we have been working with HTML4 (please do some google :) I'll be covering this part on a different article.) Today, with the existence of HTML5, new attributes and even new tags are added which made our webpages more dynamic and simpler to achieve. You might be curious of what is HTML5 anyway.

* If you have any corrections, or comments or suggestions or violent reactions, please please please feel free to raise it. I'll be very glad to address it the soonest possible. Happy coding!