First attempt at a tableless layout = fail (somewhat)

so, for the past 2 years or so ive been designing sites solely in tables, whilst using css for fonts etc.

recently i decided to try porting one of my sites current layouts to a tableless layout.
some of it works fine, it displayed fine in both firefox and ie7, but i am having some issues regarding stretching of boxes, and text alignment.

the tableless layout can be found here. obviously, the navigation boxes stretch in a rather ugly manner. absolutely no idea how to fix this.
secondly, i cant get the "Nav title" header things to display below the top of the box. i've tried padding-top, but when that is used, a space appears below the nav text div which is the same size as the padding-top value.

sorry if this is a bit hard to follow any help appreciated.

 

At a glance, I can see one issue right away. You're using paragraphs within those side boxes. There's nothing wrong with this, except by default, the <p> element has a top margin attached to it. This is why you're seeinga gap, because the margin on top of your paragraphs is pushing out the top of the containers in which they are housed.

Try adding this to your style sheet:
p { margin:0 ; padding:.8em 0 }

See if you like that effect a little more

 

thanks, much better.

is there any way i can give the navtop class some padding without it creating a space below it?

 

I'm afraid I don't understand the question...there is no element on your page with class="navtop"

 

navboxtop. you can see the problem now as underneath 'Nav title' on both sides of the page, theres a small 2px gap below it, because i set padding-top to 2px.

 

I don't even need to check your source code to be able to tell what happening this time around

I'm guessing you have an explicit height set for that element. When you add 2 pixels of padding, this adds two pixels to the height of the element automatically. So, you need to reduce the height of navboxtop by two pixels, and everything will be just fine.

Just for kicks, I just checked your .css file, and it looks like setting height:21px will solve this problem.

 

thanks much. looks fine now!

 

Always happy to help