Publishing System Settings Logout Login Register
CSS confusion: Padding, margins and alignments explained
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on October 7th, 2006
7979 views
CSS Stylesheets
CSS confusion: Padding, margins and alignments explained

As CSS has caught on throughout the web design community, I have seen increasing amounts of people having problems with padded divs, margins and alignments. It is perhaps the CSS version of the expanding content box mystery.

Padding

So what is the problem? Well if you apply padding and margins to the div no matter what heights or widths it will change it and mess up the entire layout is you�re unfortunate. It looks a complete mess if the div has a background and repeats improperly sideways. It can look like this:

”paddingwrong”

Here comes a little bit of maths :). I gave the div the width of 400 pixels which is the width of the image I used for the background. In total that�s 400 pixels wide. I then gave the div 10 pixels padding, that�s 400 + 10 = 410 pixels. Any padding and margins you style the div with increase the width or height by the size of the padding or margin.

So an example could be a div 100 pixels wide and high, 10 pixels padding and 20 pixels margin. The padding and margins contribute to make the end size 130 pixels by 130 pixels.

Don�t panic there is a very simple way to change this� Just add another div around it. It looks similar to this:

<div>

<div id=�padding�> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lectus lorem, suscipit vel, dictum vel, scelerisque ac, tortor. Nam posuere ipsum vitae augue. Morbi interdum elit nec felis.</div>

</div>

The outside div or �container�, as I�ll refer to it, is like a very strong box. Set the container to the size you wish and the inside div will not be able to stretch the container div any bigger. The padding and the margins will be fine :)


Margins

Margins are not very often required however they can be useful. They are sometimes confused with padding; the two are similar but slightly different. Padding sets a gap on the inside of an element; margins set a gap on the outside of an element. So margins are more used to separate elements on a page like if you have several content boxes, you would use margins to space them out. Padding is used to place a gap on the inside of an element.

Alignment

There is also some confusion about alignment, many of you will be fine with horizontal alignment, if you don�t know how to this is how:

Text-align:

That is the property you need to use and possible values are:

Left, center, right and justify.

Now a commonly asked question is how to vertically align text. I�ll start from the bottom up, aligning text to the bottom first.
This requires more than a line of code I�m afraid. :)
Set up your two divs one inside the other, give the outside or container div the id �container�.
Then put this in your css:

#container{
width: whateveryouwant;
height: whateveryouwant;
background: whateveryouwant;
position: relative;
}
#container div {
position: absolute;
bottom: 0;
}

The position:absolute lets us place the inside div anywhere we want inside the container div. The bottom:0 tells the page the div will have a no space between the container div on it�s bottom side.

There are two ways to centre vertically however one of them does not work in Internet Explorer and only Firefox. Because I love you so much ;) I�ll tell you both :).

Internet Explorer only
Unfortunately we have to add another div in here, it does not effect the final result just makes it look a bit messier :)

So your HTML should look like this:


<div id=�container�>
<div><div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ultrices nisi ut lacus. Quisque molestie diam sit amet nunc. Ut vulputate metus sit amet lacus. Nullam porttitor, sem sed vehicula eleifend, justo mi vestibulum massa, vel dignissim tellus metus ut lectus.
</div></div>
</div>


Now the CSS is quite simple, you could have guessed what you needed to put if you were good with CSS.

This is the CSS you need:


#fcontainer div {
position:absolute;
top:50%;
}

#container div div{
position:relative;
top:-50%;
}



The first part tells the first div the top of it should be positioned half way from the top of the container, hence the top:50%; , and is in effect centred.

It looks like this at the moment in Internet Explorer:

”centre1”

The next bit

#container div div{
position:relative;
top:-50%;
}

Refers to the very central div. The top:-50%; . Now the reason this position is a minus number is because we want to move the very inside div higher to make the text completely central.

If we set the position to top:0; this would happen:

”diagramcentre1”

So if we set it to top:�50%, 50% of it will rise higher than the 2nd div it is in.

”finaldiagram”

This is only for Internet Explorer at the moment.

Firefox and Opera
You will need the script you used with the Internet Explorer method. We will be using the Child selector command which Internet Explorer won�t execute because it doesn�t understand it, however Opera and Firefox will, which we want because we want to set different rules for the different browsers.

So to your current script add another div around the whole lot with the id �maincontainer�. It should look like this now:


<div id=\"maincontainer\">
<div id=\"container\">
<div><div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ultrices nisi ut lacus. Quisque molestie diam sit amet nunc. Ut vulputate metus sit amet lacus. Nullam porttitor, sem sed vehicula eleifend, justo mi vestibulum massa, vel dignissim tellus metus ut lectus.
</div></div>
</div>
</div>


The first bit of CSS we need to add is:


#maincontainer>#container {
display:table;
position:static;
}

This css refers to #container which is the child container in #maincontent the parent.

Display:table; = This property makes the div seem like a table
Position:static; = This property makes the div position itself like a normal element.

Now we add this to the css:


#container>div {
display:table-cell;
vertical-align:middle;
position:static;
}


This code refers to the div inside #container.

Display:table-cell; = This gives the div the properties of a table cell
Vertical-align:middle; = This command vertically aligns the div centrally which you can only style tables with, you can perform this on the div because you made them act like a table with display:table; and display:table-cell;.
Position:static; = This again makes the element (div) position itself normally.

There you go centred. A live example can be found here. Feel free to use the source code.

Hopefully this has shed light on some of the common confusing aspects of CSS. I hope this tutorial has been informative and helpful

Regards
~ Matt aka Syndrome
Premium Publisher
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
syndrome

Been working in graphic/web design for
about a year now. Experienced in
Photoshop, XHTML and CSS, these will be
what I will write for. I am currently
learning PHP.
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top