fbpx
Supercharge your SEO! subscribe to our newsletter For the latest SEO tactics & best practices

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

By
Updated April 5, 2018
No Comments
5

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


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

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.

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.

  •  
  •  
  •  
  •  

Related Posts


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of
avatar

Ready to Get Started?

Get a free consultation now