A while since I used CSS... confused by a layout issue

HTML & CSS
1

The page I am asking about is visible here http://techevet.co.uk/

I am trying to create a simple layout of 3x2 blocks, which was going well until I added <p>s within my blocks. Now the height of the text within the p is moving their parent <divs> around. I have added some thick borders so hopefully you can see what I mean.

If anyone could explain this behaviour, and offer a solution I would be most grateful.

2

Hi,

When you use inline-block you need to set the vertical alignment. Usually it is set to baseline by default so the baseline of the text lines up as in your example. What you really want for your layout is vertical-align:top.


.block{vertical-align:top}
3

Thanks that’s perfect.