Aligning text and images between two divs

http://www.mwrgermany.com/fMWR_Happenings/happenings.htm

I want the thumbnail graphics on the right-hand column to align with the community tabs on the center content column. Although they appear to be aligned in Dreamweaver, thumbnails appear further down or up on different monitors and browsers. I am spacing them with line breaks. Suggestions?

 

Either set a fixed height to your divs or use absolute positioning. Those are the only two ways I know to make sure to different vertical divs have aligned vertical content in sync.

 

... and this is why Dreamweaver's preview pane is useless and why WYSIWYGS blow chunks.

Don't space them with line-breaks - what I would suggest is applying the column appearance with faux-columns, then embedding each set of sidebar images in each article in the main column.

Though one look at the markup is making me say what I say about 90% of the code people ask for help on... Throw it out and start over using valid modern semantic markup with separation of presentation from content... You have tables for layout, presentational markup, that stupid mm_ javascript nonsense doing CSS' job, and with 103 validation errors you do not have HTML, you have gibberish.

Not your fault - you are probably relying on whatever that steaming pile of manure known as dreamweaver is making you use - more the shame... As I keep telling people the only thing you can learn from dreamweaver is how NOT to build a website - as evident by the 39k of markup for a mere 13k of actual content on the page (Easily double what should be needed for such a layout) much less the start of a second HTML document at the end of the first.

Basically to do what you are asking, I'd have a wrapping DIV around all the 'sections', a DIV for each 'section', a 'sidebar' div in each section, and a 'content' div in each section.

<div id="fauxColumns">

	<div class="article">
	
		<div class="content">
			<h2>First Article</h2>
			<p>
				Content goes here
			</p>
		<!-- .content --></div>
		
		<div class="sideBar">
			<a href="#">
				<img src="images/yourimage.png" alt="offsite link" />
			</a>
		<!-- .sideBar --></div>
		
	<!-- .article --></div>
	
</div>

Code (markup):

From there it's a simple matter of applying the background of the column to #fauxColumns, setting the width of .content and floating it left, setting the width of #sideBar and floating it right, making sure each article is set to clear it's own floats, then lather-rinse-repeat for each .article section - all of which would be in the CSS... Goes hand in hand with taking an axe to every unneccessary table in that layout.