Basic page layout
How do I make an basic page layout?
What is a basic page layout? How do you make a basic page layout? This script and codes were developed by Rob on 15 August 2022, Monday.
Basic page layout - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic page layout</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { margin:0; background:#f2f2f2;
}
.wrapper { width:80%; margin:0 auto; background:#fff; overflow:auto;
}
header { width:100%; padding:1em; float:left; border-bottom:1px solid #ddd;
}
.main { width:100%; padding:1em; float:left;
}
.content { width:80%; padding:1em; float:left;
}
.sidebar { width:20%; padding:1em; background:#ddd; float:left;
}
footer { color:#999; padding:1em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <header> <h1>This is the header!</h1> </header> <section class="main" role="main"> <section class="content"> <h2>This is some content</h2> <p> What kind of content, you ask? Why the kind that has to do with things and stuff. </p> </section> <aside class="sidebar"> <p>Some stuff that doesn't have to do with things</p> </aside> </section> <footer> <span>footer stuff</span> </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Basic page layout - Script Codes CSS Codes
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { margin:0; background:#f2f2f2;
}
.wrapper { width:80%; margin:0 auto; background:#fff; overflow:auto;
}
header { width:100%; padding:1em; float:left; border-bottom:1px solid #ddd;
}
.main { width:100%; padding:1em; float:left;
}
.content { width:80%; padding:1em; float:left;
}
.sidebar { width:20%; padding:1em; background:#ddd; float:left;
}
footer { color:#999; padding:1em;
}
| Developer | Rob |
| Username | robooneus |
| Uploaded | August 15, 2022 |
| Rating | 3 |
| Size | 2,080 Kb |
| Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
| Name | Size |
| Prototype jobboard6 | 4,758 Kb |
| Useless RPG | 4,673 Kb |
| Restaurant Item | 10,105 Kb |
| Cards | 7,078 Kb |
| Scroll Arrow - keep hidden | 4,898 Kb |
| Simple Page with Side Menu | 5,720 Kb |
| A Pen by Rob | 1,810 Kb |
| Responsive Design Demo | 1,785 Kb |
| Scroll Arrow - delayed opacity change | 4,495 Kb |
| Half-radial menu | 4,113 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
| Name | Username | Size |
| Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
| A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
| A Pen by Markku Lehmonen | SharpDal | 7,804 Kb |
| Hexagons | Ashmind | 4,360 Kb |
| Simple search using AngularJS | Haykou | 1,802 Kb |
| A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
| Starfield old school style | Bolloxim | 5,214 Kb |
| Table border-collapse property | Maxds | 1,672 Kb |
| Elephants Full screen site | Orrinward | 3,981 Kb |
| A Pen by Alex Bergin | Abergin | 3,347 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!