Here I have the issue in html/css : LINK I know there ways arround but they cost more energy to apply. My solutions is a smarter one, just make the parent ignore the margin of the childs! So no individual classes per block is needed.
@andy_unleash Put simply: it's not what they were meant to be used for. We have used them as CSS offers nothing better, although that looks set to change. Evidence to my opinion is the number of issues with float based layouts. The biggest culprit being the need to use a clearfix hack. Most of the time, inline-block will suffice.
In the image you see the issue that I have.
The divs have margins right and left 20 px
But I only want this to have influence on the content that is in it.
Is there a way to get this done? I really need this because my website is all about strict alignments.
http://img15.imageshack.us/img15/7108/probkj.jpg
But how about changing the margin property to "padding"?
Hope this makes it a bit clearer ;)
Hope this works for you
.block {
background-color: #CCCCCC;
float: left;
height: 170px;
margin-left: 20px;
margin-top: 20px;
width: 170px;
}