[kman42]

I'm a web newbie, but have acquired the webmaster duties for our organization. I'm trying to revamp the site using proper css so that it is easier to maintain than using tables (yikes!) as it has been up to now.

I'm having a problem getting a few elements to abut one another top-to-bottom. Here's the relevant code:

Code:
.mainlayout {position:relative; margin-left:auto; margin-right: auto; width: 924px}
.toprunner {background-color: 666666}
.topline {background-color: ff9900; height:5px}
.mainbody { position:relative}
.introbox {clear: both; width: 924px}
.leftcolumn { float:left; width: 144px; background-color: #ddecfe }
.rightcolumn { float:left; width: 660px; background-color: #FFFFFF }
.adcolumn {float:left; width: 120px; top:186; left:760; background-color: #FFFFFF}
.runner {clear:both; width: 924px; background-color: #336699}

<DIV Class="mainlayout">		
<img name="index_new_r1_c1" border="0" usemap="#index_new_r1_c1Map" width="760" src="test-images/index_new_r1_c1.gif" height="184" />
<DIV Class="toprunner">
	<p Class="style2" size="14"> Our organization</p>
</DIV>
<DIV Class="topline">
</DIV>
<DIV Class="mainbody">
	
	<DIV Class="leftcolumn">
          <!--table here-->
        </DIV>
</DIV>

I can't get 'toprunner' or 'topline' to abut the element above. They have about 10px of space between them. 'leftcolumn' is flush with 'topline' which is what I want.

Any help?

thanks!
kman

[Chuckit]

It's the <p> tag that's doing it. Browsers automatically put a bit of a margin on paragraphs. Set margin:0 either on p or on style2.

Though I'm not really sure you need a p tag if that's really the sort of thing it's being used for — it's not semantically a paragraph and you can just put any relevant styling on the div itself.

[kman42]

Originally Posted by Chuckit 

It's the <p> tag that's doing it. Browsers automatically put a bit of a margin on paragraphs. Set margin:0 either on p or on style2.

Though I'm not really sure you need a p tag if that's really the sort of thing it's being used for — it's not semantically a paragraph and you can just put any relevant styling on the div itself.

Thank you! As a newb, I appreciate any help I can get!

[besson3c]

I'd also suggest killing off the capital letters in your tag names. If you are coding in XHTML I believe these will cause validation errors, forcing browsers into quirks mode.