NoobToPro2000
Passive Income Architect
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Introduction:
This tutorial is on how to position elements properly in CSS.
Template:
Here is the default HTML template containing our head and body for our page...
Linking CSS:
Next, if we were going to be using an external (from the editing HTML/PHP file) CSS file, we would want to link our CSS file in the head tags, like so...
I'm going to be using inline styling in order for it to be easier to read and understand for you, the reader.
Elements:
So now we want to create some test elements. I will create, a header div, a footer div, a content div, and a sidebar div...
We want our head to cover the full width of our content page, at the top. Footer is the same as the header but at the bottom. Content will be the majority of the middle (vertically) on the left hand side, while we our sidebar will fill the right side of the page.
Background:
So we can easily tell our divs apart, we are first going to add a background colour to each of them...
My colours;
Header; Blue
Content; Pink
Sidebar; Orange
Footer; Black
Width & Height:
If you test your page, you will get nothing. That is because although our div's are there (check the page source code), they only have dimensions of 0 x 0 due to not having any content inside of them. We are going to set the heights and widths appropriately. We want our header to be full width, followed by, let's say 120pixels (px) height...
Content is not the full width due to the sidebar, we'll put 75% leaving 25%. Height will be 600pixels...
Sidebar is not the full width due to the content, we have 25% left, so we'll use 20% of it leaving 5% as space, etc. We'll use the same height as the content, therefore keeping the page as a grid layout.
The footer will be the same as the header...
Now test your page. You can see that it's all fine, except our sidebar is under our content div. Not a very good sidebar, is it?
Siding...?
To make our sidebar 'float' to the right hand side of our page, we'll use the convinient float property, set it to 'right'...
We also need our content to be floating left in order to make room for our sidebar floating to the right side of the page...
Problems...
Perfect... No? Our header has gone behind our floating divs, and is now directly below the header. Add 'clear:both' to the footer to fix this, so it goes under all floating divs.
Finished!
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Download
This tutorial is on how to position elements properly in CSS.
Template:
Here is the default HTML template containing our head and body for our page...
Linking CSS:
Next, if we were going to be using an external (from the editing HTML/PHP file) CSS file, we would want to link our CSS file in the head tags, like so...
- <link
rel
=
'stylesheet'
href
=
'style.css'
type
=
'text/css'
/
>
I'm going to be using inline styling in order for it to be easier to read and understand for you, the reader.
Elements:
So now we want to create some test elements. I will create, a header div, a footer div, a content div, and a sidebar div...
- <div
class
=
'header'
>
- </
div
>
- <div
class
=
'content'
>
- </
div
>
- <div
class
=
'sidebar'
>
- </
div
>
- <div
class
=
'footer'
>
- </
div
>
We want our head to cover the full width of our content page, at the top. Footer is the same as the header but at the bottom. Content will be the majority of the middle (vertically) on the left hand side, while we our sidebar will fill the right side of the page.
Background:
So we can easily tell our divs apart, we are first going to add a background colour to each of them...
- style=
'background-color: black;'
My colours;
Header; Blue
Content; Pink
Sidebar; Orange
Footer; Black
Width & Height:
If you test your page, you will get nothing. That is because although our div's are there (check the page source code), they only have dimensions of 0 x 0 due to not having any content inside of them. We are going to set the heights and widths appropriately. We want our header to be full width, followed by, let's say 120pixels (px) height...
- width
:
100%
;
height
:
120px
;
Content is not the full width due to the sidebar, we'll put 75% leaving 25%. Height will be 600pixels...
- width
:
75%
;
height
:
600px
;
Sidebar is not the full width due to the content, we have 25% left, so we'll use 20% of it leaving 5% as space, etc. We'll use the same height as the content, therefore keeping the page as a grid layout.
- width
:
20%
;
height
:
600px
;
The footer will be the same as the header...
- width
:
100%
;
height
:
120px
;
Now test your page. You can see that it's all fine, except our sidebar is under our content div. Not a very good sidebar, is it?
Siding...?
To make our sidebar 'float' to the right hand side of our page, we'll use the convinient float property, set it to 'right'...
- float
:
right
;
We also need our content to be floating left in order to make room for our sidebar floating to the right side of the page...
- float
:
left
;
Problems...
Perfect... No? Our header has gone behind our floating divs, and is now directly below the header. Add 'clear:both' to the footer to fix this, so it goes under all floating divs.
- clear
:
both
;
Finished!
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Download
You must upgrade your account or reply in the thread to view hidden text.