Introduction to CSS Tutorial for Beginners – Explaining Floating of Divs – Wrap Your Contents

Introduction to CSS Tutorial for Beginners – Explaining Floating of Divs – Wrap Your Contents

August 14, 2019 0 By Peter Engel


Hello and welcome to another new episode of
Learning Simplified. This is the best way to implement the project, to code your HTML
and CSS document just as you learnt from your previous tutorial.
So this is the final time we are doing so to delete all the things from our project
and we are trying to reconstruct with the aid of the new knowledge that we have gained
from our previous tutorial. So, let’s get back to our template first
and see, what modification we are about to bring in these forth coming coding. All we
can see here that this is the main template that we are actually working on, so first
of all, all we are going to do, we are going to make this ‘mother-wrapper’ first, that
is wrapping all the contents inside and which is placed at the central position of your
web page. First of all, delete all those things so far that we created over here. So I am
deleting all these things inside this body tag, and not only from here, all we got to
do, we are going to ‘stylesheet.css’, and we have to delete all those things except
the default selectors and the universal selector present over here. All we have to do is to
delete those class names or selectors that we have created so far. So just delete it,
and we will reconstruct our codex as per as the project criteria.
So right now I have deleted all those things and I have saved the page and get back to
project and if we reload, we will see nothing as it was expected. So, let’s try to create
the ‘mother-wrapper’ first that we have discussed over here. Always wrap your content
inside ‘mother-wrapper’ which is at a width of 1000px. Now the reason behind keeping
all the width around this CSS tutorial to keep this content into 1000px width is that,
the lowest possible dimension of a monitor that could be detected around the world is
1024 X 768 pixel dimension. So to fit our contents into that resolution or dimension,
all we need to do is to keep our contents inside a 1000px wrapper and this is the only
cause to wrap our contents in such a manner. So, the first thing is, we are creating a
mother wrapper which is of 1000px and for the time being to make ourselves sanguine
that the divs are positioned properly we will provide a background color and height. So,
this is what we are going to do in our very first situation. We are just getting back
to our project ‘stylesheet.css’ and then what we are going to do we are going to create
our ‘mother-wrapper’. So, this is the ‘mother-wrapper’ that
has been produced over here. Now what we are going to do, we are going to implement this
into our ‘index.html’, and what are we doing here we are going to create that inside
ourtag. Get back to your web project and reload and you see that the ‘mother-wrapper’
is now appeared into your project. I think it has been a little bit of excess height
over there that has been imposed, so I am reducing it to 500px and I am getting back
to our web project and reloading it and we see that the wrapper is here with the background
color which was given as ‘red’. Now, the second thing is, go step by step,
inside this ‘mother-wrapper’, what we are doing now, we are creating another 1000px
‘content-wrapper’ which will wrap this tagline and everything that comes within.
So all we need to do we need to create another ‘content-wrapper’, so…
At present, what we are going to do we are going to create another wrapper which is known
as .tagline-holder. No need to provide any margin ‘0 auto’ condition over here as
it is at a width of 1000px same as the main wrapper or ‘mother-wrapper’ which is also
at a width of 1000px, so we don’t need to mention any margin 0 auto condition over here,
we don’t need to worry about middle alignment as both the divs are equal in size. All we
need to worry here is just to provide another background color such that they do not jumble
up together, providing a hash tag and pressing ‘CTRL + V’. so the second thing is a ‘tagline-holder’
providing a width of 1000px. So all I am doing here, I am just going back to ‘index.html’,
and inside this ‘mother-wrapper’, I am creating another div…..now just get back
to your project and reload, and you see that a ‘tagline-holder’ has been produced over
here. Now the other thing is, all you need to do
is to create the third wrapper over here which is the ‘menu-holder’. Now just change
the color into different one, suppose this one, press ‘ok’. Now, you are creating
another wrapper over here at a width of 1000px at which this menu item will come, okay? At
which this menu item will be appearing. So just get back to your project. The third wrapper
that is coming over here is ‘menu-holder’. We don’t have to really worry about this
‘margin: 0 auto’ as I have told you previously because this wrapper is at a same width as
of this ‘mother-wrapper’ we are seeing here. So in that case there no such margin
should be provided as both of them are of equal dimension, so we are not providing any
margin over here. Now we are making a background color over here, get back to GIMP and suppose
we are providing this color. Copy this color code and press ok. Now get back to your project,
provide a hash tag (#), press ‘CTRL + V’, and provide the separator at the end of the
syntax. Now get back to HTML. So this is the div which is ‘tagline-holder’ and this
is the ‘mother-wrapper’. Now there’s a matter of thing that we have created both
the ‘menu-holder’ and ‘tagline-holder’, so the ‘menu-holder’ will be obviously
coming after this ‘tagline-holder’, according to this template as we can see over here that
the tagline appears first inside this ‘mother-wrapper’ and then appears the ‘menu-wrapper’. So
all we have to do we have to create a ‘menu-holder’ div inside this ‘mother-wrapper’ and after
the advent of this ‘tagline-holder’. So all we are going to do at the end of this
div, we are creating this ‘menu-holder’. Now get back to your project and reload and
you will see that the ‘menu-holder’ now appears inside your mother-wrapper. And always
remember, these things we are creating so far, those are actually the parent divs. We
are not actually not disintegrating them into several parts which we will be learning in
the later part of this tutorial but the first thing is to confine this whole thing into
a 1000px ‘mother-wrapper’ such that no content gets ‘up and down’ and there should
be a proper view in every cases and every monitors around the world.
The next thing all we are about to create here is now, the content part. Just change
this color into for say, this one… or you may choose a red color. Now, create another
1000px wrapper over here, the parent div which will be inside
this ‘mother-wrapper’…. Now get back to ‘index.html’ and this
content part, this paragraph part, it is just following this ‘menu-holder’ tag so all
we need to do is that after the end of this ‘menu-holder’ tag , we are now creating
this… get back to your project, reload and you will see that the ‘content-holder’
is now in place. So if you want to stay on a safe side, just get back to your ‘stylesheet.css’
and here, just increase the height by 100px, i.e., 600px, get back to your project and
reload. Okay, now the height of the ‘mother-wrapper’
is now increased. Now, what we are doing over here, we have to get back to ‘stylesheet.css’
and creating the final element of the project which is known as ‘footer-element-display’.
As usual, we are providing a width of 1000px and for the background you can choose any
color you want to select, provide a hash tag (#), press ‘CTRL + V’, provide the separator
at the end of syntax, press ‘CTRL + S’ to save the document, get back to index page,
come back, descend down, after this ‘content-holder’, provide the div with class name ‘footer-element-display’
and provide the div over here. Now reload and you see that every div, every single wrapper,
the parent div that has been created so far, those are now in position, in place. So all
we can do here now, we can remove the background color, or the height of the ‘mother-wrapper’.
It will be wise thing to remove this height from it. If you are not happy with this thing
just provide a padding where you provide the following syntax – 0 from the top, 0px from
the right, 10px padding from the bottom, and 0px padding from the left. Oh!! Did you see
the error that I did here? What I did here, I just placed this padding into the ‘tagline-holder’,
but this is not the actual area where I intend to provide so. All I wanted to place it here.
So, we are just copying this syntax and pasting it to ‘mother-wrapper’. Get back to your
project, reload and you see that the same thing has been reflected to your site. All
we can see now this is the first wrapper, which is known as ‘mother-wrapper’ which
contains all the contents inside it, and it is actually been aligned into the middle position
of this site and then you can see that this is the first ‘content-wrapper’ which is
coming to this position, this blue colored block is actually the ‘tagline-holder’,
the purpose of which is to hold the tagline inside, and then comes the ‘menu-wrapper’,
the second parent-div over here at a width of 1000px which is just following this ‘tagline-holder’
div, then comes the third holder which is known as ‘content-holder’, purpose of
which is to house the paragraph element over here, and the last thing is ‘footer-element-display’,
parent div, the purpose of which is to display the designer, maker and others in this site.
So what we think that all the divs are placed in position and in a fruitful manner and it
is arranged in a sequential manner as it should be, what we intended so far, so now, it is
time to introduce all those child-divs inside. So now let’s create them…..