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

5

by on April 5, 2018

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

  •  
  •  
  •  
  •  

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.


  •  
  •  
  •  
  •  
Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of
avatar

Ready to get started?

Get a free consultation now