HTML rendering bug in Chrome/safari - looks ok in firefox

I'm having a weird vertical spacing bug in chrome/safari that I missed when setting it up in firefox. It seems some vertical spacing rule is being ignored by one or the other. I've gone through the code but am at a loss - pointing me in the right direction would be highly appreciated - many thanks in advance.

The web site is about teaching kids the impo开发者_C百科rtance of eating healthy, the URL is: http://ourgrowingplace.us/

If you want to position divs next to each other like you're trying to do, use float:

#left {
  float: left;
  width: 100px;
}
#right {
  float: right;
  width: 50px;
}
.clear {
  clear: both;
}

I also added a .clear class: make sure you clear the floats so any content that follows is positioned underneath these two floats:

<div id="left">left content</div>
<div id="right">right content</div>
<div class="clear"></div>

Also, you can't use left/right/top/bottom on relatively position elements. Use them on an absolute positioned element instead by placing the position:absolute element within a position:relative element. In this case you shouldn't be using this though.

And try to avoid using margin to "push" an element to a certain spot. Now you're adding a negative top-margin to get it to go up. But if you're doing that it usually means you should try another layout setup.

I suggest you first make sure that your page conforms to the specification you used in DTD, the page on the address you specified is not valid XHTML 1.0 Transitional, nor does it match the specified character set (iso-88559-1). This effectively means that rendering results could be unpredictable and vary among browsers.

I don't know what vertical-spacing rule you're talking about, but the proper way to set the spacing of elements is through margins.

margin:top right bottom left;