What is a HTML Wrapper?
An HTML wrapper allows you to center content within a webpage.
This simple strategy requires CSS (either in the header of the document in a
tag – or ideally in a separate style sheet) to make the wrapper work. The key components we’ll talk through are the centering component, the width of the wrapper and the internal padding.
Why did we provide this resource? We serve contractors and home service companies with marketing + web design! Check out our blog posts about Plumbing Leads, Electrician Leads, Roofing Leads, HVAC Leads, Construction Leads, Remodeling Leads and our Plumbing SEO, Electrician SEO, Roofing SEO, Contractor SEO, Remodeling SEO, and HVAC SEO services!
How do you create an HTML and CSS Wrapper?
Here’s the basic code!
/**
* 1. Centers the content.
* 2. Feel free to change this, this sets the width
* 3. Adds some internal 'padding' to the div
*/
.wrapper {
margin-right: auto; /* 1 */
margin-left: auto; /* 1 */
max-width:1160px; /* 2 */
padding-right: 10px; /* 3 */
padding-left: 10px; /* 3 */
}
If you haven’t worked with some of these things before – it may be useful to give some explanation of how these components work together.
Essentially the Div tag is the structure, and the CSS (the second set of code) does the styling.
This is great for content or text elements that you want to be contained, but centered. You can also use the general concepts of this tutorial to set up a ‘container’ HTML element – you would just switch out the word ‘wrapper’ for the word – ‘container’, though the implications for a container are generally that a container is a structural element for an overall page.
An HTML Wrapper wrapper is said to be more for a single element than a structural component, though this is open to some interpretation, and by no means Coding gospel.
