How to create a basic content container in HTML + CSS (Very Basic)

[Queef]

This tutorial is incredibly basic and should be something every person that can code basic html and css on here should know, sadly, they don't.

I usually wouldn't post something like this but I'm sick of seeing messy coding on templates where people have margined their content from the left and the right of the screen because they don't know how to make a simple container.

First off

<div class="container">
      (Your content here)
</div>

As mentioned in the above code, place your html for the specific area you're trying to center in the div tags of the container class.

Then apply this style,

.container { width: 900px; margin: 0 auto; }

You can change the width to whatever you like. The wider it is, the more spaced out and closer to the edges of the screen your content will appear.

Now, if theres a certain section in the page that you want to be wider for some reason you could easily do something like,

.container.wider { width: 1000px; }

and the HTML for that would be,

<div class="container wider">
</div>

 

[tyr0ne]

It would've been important to explain what the margin auto does. Also the basic positioning when you don't want your content centered.

 

[GarettM]

Okay Folks Lets Brake Down the Code

.container { width: 900px; margin: 0 auto; }

.container

This is The class selector or class we are working with. This class works with the element tag

class="container"

Know lets inspect the Margin code..

margin: ( The Space Between the Top Parent Element and The Child Element or Current Element tag ) ( The Space Between The Left i think Parent Element and the current element ) ( The Space Between The Bottom Parent Element and the child element ) ( The Space Between The right parent element and the child element );

Know lets View an Example:
... FUCK IT!

 margin: 2px auto; // 2px from top parent element, have browser center the element with auto, 2px from bottom parent element, have browser center the element with auto again!

DID i MAKE any Sense?

 

[Nehalem]

Probably the simplest guide I've ever seen. If you can't understand this, you have a lot to learn about coding.

Good job.

 

[GarettM]

Probably the simplest guide I've ever seen. If you can't understand this, you have a lot to learn about coding.

Good job.

I think he should of included what's an element, class, I'd, selector, and psuado-events

 

[Sysode]

This was a simple tut on how to create a container because a fair few people on db actually use them - instead they try playing around with margins for every element.

So to everyone saying "he should do this" blah blah, stahp pls - OP posted this for a reason