Articles

HTML Wrapper Tutorial: HTML & CSS ‘Wrapper’ How to

date posted

07/01/21

read time

2 Mins

A person holding a tablet displaying a website security interface. On the left, the cWatch logo is visible with a cloud icon. The screen resembles an HTML Wrapper Tutorial, offering options to scan and protect a site, emphasizing website security features.

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.

Banner Text: "Complimentary Website Audit: Unlock Your Winning Strategy"  
Bold Text: "Claim Yours Now"  
Note with Arrow: "Exclusively for Home Service Companies"  

Background: Dark with a subtle pattern.

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.

Social Media for Contractors Course + Daily Prompts

We spent 3 months putting this together just for contractors – and it’s totally free!

🔥 5 preparation days with key mindset things before you start posting.

🎥 10 original videos

📝 6 weeks of social media daily prompts

Is there you or someone on your team that would like to take it? Enter their info (or yours) below!

A skydiver dressed in a black jumpsuit descends against a clear blue sky, with distant mountains and a body of water framing the scene. The YouTube Originals logo is positioned at the bottom right.

Ready to take the leap?

“We know what it takes to help get home service businesses more leads with Google. Even if we’re not the right fit, we’ll get you where you need to go.”

A woman with long, wavy brown hair stands confidently in front of a black brick wall, embodying Tim Brown's iconic urban style. She wears a black top and accessorizes with a heart pendant gold necklace.
- Sydnee Olsen, Sales Lead
Schedule Intro Call Schedule a Free 20-Minute Consultation (No Obligation)