Page Layout Teachwebdesign.com

HTML RWD DESIGN TECHNIQUE
For Webpage Layouts

F.A.Q---Tables

I have had so many requests for more information on how to layout a page so that content can be added in many different areas... So here's the way... using the RWD Layout Design Technique...

NOTE: For beginners I recommend RWD (Responsive Web Design) for layout techniques...INFO HERE

Remember...you will be making your WHOLE PAGE into a big Row and Column Format using HTML Divisions (<div>)and CSS Classes (class="name")... this will create a sort-of "page format" to locate elements and content on your web page... READ W3Schools GRID VIEW ...

Also I will include using another RWD Layout method which employs GRID MODULES... Remember...you will be making your WHOLE PAGE into a big Row and Column GRID using CSS Coding ... this will create a sort-of "page grid" to locate elements and content on your web page... READ W3Schools GRID MODULES ...

And...you can fill each area with Text, Images, Links, Tables OR leave it BLANK (put in  ) to create a "space" area...

You can use background colors ( style="background-color:#??????;" ) to create even more effects...

Below are several page layout examples using a RWD Format with the source code below each...for you to study or copy for your own page source code!

You can make other Layout Formats to suit your choice!

For lessons on RWD go to W3Schools

EXAMPLE #1

Top Page Area

Left Area

Center Area

Right Area

Bottom Page Area

Full Page VIEW

TO ILLUSTRATE RESPONSIVE DESIGN (RWD) I will present the Above Page Layout Code (for EXAMPLE 1) ...Here Below Using RWD Coding:

<!DOCTYPE html> <html lang="en"> <head> <title>Page Layout Example Davmagic.com</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } img { max-width: 100%; height: auto; } .row:after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 0px; width: 95%; margin-bottom:0em; } @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } </style> </head> <body> <div class="toprow"> <div class="col-12" style="background-color: #ccffcc;text-align:center;"> Top Page Area </div> </div> <div class="secondrow"> <div class="col-3" style="background-color: #ff9999;text-align:center;"> Left Area </div> <div class="col-6" style="background-color: white;text-align:center;"> Center Area </div> <div class="col-3" style="background-color: #cccccc;text-align:center;"> Right Area </div> </div> <div class="bottomrow"> <div class="col-12" style="background-color: yellow;text-align:center;"> Bottom Page Area </div> </div> </body> </html>

NOTE... HOWEVER... THAT FOR THE ABOVE RWD CODE, THE FOLLOWING CSS CODE WAS USED (placed in the head section or on a separate style sheet):

IN ADDITION THE FOLLOWING VIEWPORT CODE WAS PLACED INTO THE HEAD SECTION OF THE PAGE:

IMPORTANT NOTE: Remember that I am creating a page layout that will show for ALL Screen sizes... using the RWD Technique... so now when Viewed From A Smaller Screen (in this case an IPhone 6+) EXAMPLE 1 will look like this:

Full Page VIEW (From an IPhone 6+)

You can see how the divisions "line-up" vertically for the smaller screen size!

TO ILLUSTRATE THE GRID Module METHOD ... HERE IS THE SAME EXAMPLE, USING THE RWD GRID Module METHOD:

Full Page VIEW

<!DOCTYPE html> <html lang="en"> <head> <title>Grid Layout Example Teachwebdesign.com</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto ; grid-gap: 0px; background-color: black; padding: 0px; } .grid-container > div { text-align: center; padding: 20px 0; font-size: 30px; } .item1 { grid-column-start: 1; grid-column-end: 5; } .item2 { grid-column-start: 1; grid-column-end: 2; } .item3 { grid-column-start: 2; grid-column-end: 4; } .item4 { grid-column-start: 4; grid-column-end: 5; } .item5{ grid-column-start: 1; grid-column-end: 5; } @media only screen and (max-width: 768px) { .item1 { grid-area: 1 / span 4 / 2 / 5; } .item2 { grid-area: 2 / span 4 / 3 / 5; } .item3 { grid-area: 3 / span 4 / 4 / 5; } .item4 { grid-area: 4 / span 4 / 5 / 5; } .item5 { grid-area: 5 / span 4 / 6 / 5; } } </style> </head> <body> <div class="grid-container"> <div class="item1" style="background-color:#ccffcc;">Top Page Area</div> <div class="item2" style="background-color:#ff9999;">Left Area</div> <div class="item3" style="background-color:white;">Center Area</div> <div class="item4" style="background-color:#cccccc;">Right Area</div> <div class="item5" style="background-color:yellow;">Bottom Page Area</div> </div> </body> </html>

AND AGAIN BESIDES PLACING THE Viewport Code INTO THE HEAD SECTION ... THIS STYLING CSS CODE WAS PLACED THERE:

EXAMPLE #2

Top Page Area
Left Area	Main Area

Bottom Area

Full Page VIEW

TO ILLUSTRATE RESPONSIVE DESIGN (RWD) I will present the Above Page Layout Code (for EXAMPLE 2) ...Here Below Using RWD Coding and like all the RWD Code, you need to place the appropriate STYLE and VIEWPORT Codes into the page's HEAD Section... as referenced above:

<!DOCTYPE html> <html lang="en"> <head> <title>Page Layout Example Davmagic.com</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } img { max-width: 100%; height: auto; } .row:after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 0px; width: 95%; margin-bottom:0em; } @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } </style> </head> <body> <div class="toprow"> <div class="col-12" style="background-color: #ff9999;text-align:center;"> Top Page Area </div> </div> <div class="secondrow"> <div class="col-3" style="background-color: #ffcc99;text-align:center;"> Left Area</div> <div class="col-9" style="background-color: #ffff99;text-align:center;"> Main Area</div> </div> <div class="bottomrow"> <div class="col-12" style="background-color: #ffffff;text-align:center;"> Bottom Area </div> </div> </body> </html>

EXAMPLE #3

Left Side Area	Top Page Area
	Next Area
	Next Area
	Next Area
	Bottom Page Area

Full Page VIEW

TO ILLUSTRATE RESPONSIVE DESIGN (RWD) I will present the Above Page Layout Code (for EXAMPLE 3) ...Here Below Using RWD Coding and like all the RWD Code, you need to place the appropriate STYLE and VIEWPORT Codes into the page's HEAD Section... as referenced above:

<!DOCTYPE html> <html lang="en"> <head> <title>Page Layout Example Davmagic.com</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } img { max-width: 100%; height: auto; } .row:after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 0px; width: 95%; margin-bottom:0em; } @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } </style> </head> <body> <div class="toprow"> <div class="col-2" style="background-color: white;text-align:center;"> Left Side Area </div> <div class="col-10" style="background-color: white;text-align:center;"> <div style="text-align:center;"> Top Page Area </div><p> <div style="text-align:center;"> Next Area </div><p> <div style="text-align:center;"> Next Area </div><p> <div style="text-align:center;"> Next Area </div><p> <div style="text-align:center;"> Bottom Page Area </div> </div> </div> </body> </html>

EXAMPLE #4

Your Top Main Area

A Left
Side Bar

Main Text Area

Right
Side
Bar

Lower Text Area

Full Page VIEW

TO ILLUSTRATE THE GRID Module METHOD AGAIN ... HERE IS EXAMPLE 4, USING THE RWD GRID Module METHOD (The Complete Page Code):

<!DOCTYPE html> <html lang="en"> <head> <title>Grid Layout Example Teachwebdesign.com</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .grid-container { display: grid; grid-template-columns: auto auto auto auto ; grid-gap: 0px; background-color: black; padding: 0px; } .grid-container > div { text-align: center; padding: 20px 0; font-size: 30px; } .item1 { grid-column: 1 / 4;} .item2 {grid-column: 1 / 2;} .item3 {grid-column: 2 / 4;} .item4 {grid-column: 4/ 5; grid-row: 1/ 3; } .item5 { grid-column: 1 / 5;} @media only screen and (max-width: 768px) { .item1 { grid-column: 1 / 5; grid-row: 1/ 2;} .item2 { grid-column: 1 / 5; grid-row: 2/ 3;} .item3 { grid-column: 1 / 5; grid-row: 3/ 4;} .item4 { grid-column: 1 / 5; grid-row: 4/ 5;} .item5 { grid-column: 1 / 5; grid-row: 5/ 6;} } </style> </head> <body> <div class="grid-container"> <div class="item1" style="background-color:#ff9999;">Top Main Area</div> <div class="item2" style="background-color:#cccccc;">Left Side Bar</div> <div class="item3" style="background-color:#ccffcc;">Main Text</div> <div class="item4" style="background-color:blue;"><span style="color:white;">Right Side Bar</span></div> <div class="item5" style="background-color:#ccff99;">Lower Text Area</div> </div> </body> </html>

For lessons on RWD go to W3Schools

Continue with help pages...use the links below...

F.A.Q---Tables

HTML RWD DESIGN TECHNIQUE For Webpage Layouts

HTML RWD DESIGN TECHNIQUE
For Webpage Layouts