The Css Box Model

Hi guys, yes I know it's been a long while, forgive my tardiness :) . Anyway today's blog is about The Css Box Model and is aimed at our beloved programmers, who often get confused about css and its elements, how to position div tags etc.

First and foremost, I am sure some of you are wondering what the hell is a Css box model. It is essentially

a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.

Why should you even bother understanding this? Well let me put it this way, you 'get' the box model, your 'css life' becomes much easier. Look at it as the syntax of how to position your div tags or elements and get them to look exactly how you want them to.

For example lets take a php if statement and a normal div tag.

Php if statement

$my_name = "bluebox";

if ( $my_name == "bluebox" ) {
 echo "Your name is someguy!<br />";
}
echo "Welcome to my homepage!";

Div tag 

#mydiv{

margin-right:20px;

width: 200px;

height: 200px;

float:left;

}

Ok so your php statement is saying if the variable $my_name is equal to bluebox

then output Your name is bluebox, leave a line and output Welcome to my homepage! 

Note that your if statement is enclosed by {}, if you fail to open or close your

statement then your output will not display as you desire.

Similarly your div tags outputs a box with a width and height of 200px,

which floats to the left, and is 20px away from the right. Now remember this 

div will position itself relative to the parent box, in other words if its in 

another box then it will float left and be 20px away from the right margin,

within the parent box. If your syntax is incorrect, forget to close your tags,

mispell something etc, then your output wouldnt be what you desire.

Here's a thread that I think will assist you in understanding these concepts:
http://css-tricks.com/the-css-box-model/

Furthermore, Css renders differently in different browsers, but more often that 

not you will find that IE will give you more grief than the rest. So sometimes 

you gotta hack it so to speak. Here another useful link:

http://www.brunildo.org/test/ this link has a whole list of wonderful,

from floats, margins to pop-ups.

Another useful tip is to use Css Resets, Tyron, another awesome BlueBox Web

Developer has covered this quite nicely in his blog, you will find it here:

http://blueboxwebdev.tumblr.com/post/5244113656/css-resets 

Hope todays blog has given you guys more insight on Css and the box model.

Till next time

Ciao