Question

I am trying to use 960 grid css .

How do I do away with the space between two divs one above the other ? [ the space between the blue lines as shown in the picture ]

I generated my CSS using the CSS generator at http://grids.heroku.com/ .
I generated the CSS for a grid with 12 columns and width of 720 [ as below ]

http://grids.heroku.com/grid?column_width=59&column_amount=12&gutter_width=1

My html code is as below

<div class="container container_12">  

<div class="grid_12">  
    <p>  
        12 
    </p>  
</div>  


<div class="clear"></div>   

<div class="grid_5">  
    <p>  
        5  
    </p>  
</div>  


<div class="grid_7">  
    <p>  
        7  
    </p>  
</div>  


<div class="clear"></div>   

<div class="grid_3">  
    <p>  
        3 
    </p>  
</div>  


<div class="grid_9">  
    <p>  
        9 
    </p>  
</div>  


</div>

Answer 1

it’s the margin on the P tags inside those divs which is creating the vertical space. set container div p {margin:0} and it all goes away.