Blogger Question : div's touching, can't seperate them!

Question by: Slim_

Hi guys,

I'm having problems with a footer div touching the main content area div on firefox 3. It displays fine (a margin of about 40px) on internet explorer. I have been breaking my head over this for over two hours, and I have no idea what the problem is. Adding br /'s in between the div's works fine in FF3, but ruins it in IE. Below are the codes for the main content div and the footer div... I also took a screenshot so you can get an idea how firefox 3 is displaying the div's.



//styling for main div
.main {
width:600px;
float:right;
background-color:#3b3b3b;
margin-top:15px;
margin-right:25px;
overflow:hidden;
color:#fff;
padding-left:15px;
padding-right:15px;
padding-top:15px;
padding-bottom:15px;
border:2px dashed #fff;
}


Answer:

A quick look at your CSS. Just add margin-bottom:20px; <-- whatever you want it to be to main div. When styling margin with CSS you may be doing this:

margin-top:15px;
margin-right:25px;

There's no need though as you can use this CSS shorthand property:

margin: 15px 25px 20px 25px;

Note:-
15px=margin-top
25px=margin-right
20px=margin-bottom
25px=margin-left

For example (the above case), just write is as:-

margin: 15px 25px 0px 0px;

Hope, this helps.