Help with CSS layout / <div>

HTML & CSS
1

I am trying to get the “maintop” div tag to have the specified border graphic at the top and bottom, and the 3 divs within “maintop” need to go across the “maintop” div from left to right. The layout should look like it does on this site:

www.iwearyourshirt.com

My site: www.billboardfamily.com

index.php

<?php include("header.php"); ?>


<div id="maintop">
	<div class="border">
	
	
	<img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/largedots.png" alt="Welcome To The Billboard Family 

Online!" />

	</div>


	<div class="welcome">
	<img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/welcome.png" alt="Welcome To The Billboard Family 

Online!" />

	<p>We are <span style="color: #00afef;"><strong>The Billboard Family</strong></span> -- a REAL family of 4 (with one on the way) 

who wears YOUR COMPANY SHIRTS all day long, taking loads of photos and videos. We then promote your company online on Facebook, Twitter, 

Flickr, YouTube, and our Website, as well as to all of the many people who ask us why we are all wearing the same shirts :). We live in 

the St. Louis, Missouri area, but we travel and take vacations frequently. Some of the places we travel to include Chicago, IL, Seattle, 

WA, Walt Disney World&#0153; in Orlando, FL, and the Southern Illinois University (SIU) area in Illinois. We have plans to travel much 

more in the near future.</p>


	</div>

<div class="welcomeimage">
<img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/family_main.gif" alt="Welcome To The Billboard Family Online!" 

/>
</div>

<div class="update">
<img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/family_main.gif" alt="Welcome To The Billboard Family Online!" 

/>
</div>

<div class="border">
	
	<img src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/largedots.png" alt="Welcome To The Billboard Family 

Online!" />

	</div>

</div>

<div style="clear">&nbsp;</div>

<?php include ('sidebar_index.php'); ?>

<!-- BEGIN content -->
<div id="content" style="margin-top: 10px;">
	
	<div class="post"><?php
 $lastposts = get_posts('numberposts=1&category=6');
 foreach($lastposts as $post) :
    setup_postdata($post);
 ?>
 <h2><a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content(); ?>
 <?php endforeach; ?>
	</div>
	
</div>
<!-- END content -->

<?php get_footer(); ?>

style.css

/** BEGIN index top **/
#maintop {
	float: left;
	height: 200px;
	width: 1000px;
	font-family: Arial;
		
}
	#maintop .border {
		background: transparent url(../images/largedots.png) repeat-x bottom;
	}
	#maintop .welcome {
		width: 500px;
		padding: 10px 0 10px 0;
		font-size: 15px;
	}
	#maintop .welcome p {	
		float: left;
		padding-top: 5px;	
	}
	#maintop .welcomeimage {		
		width: 250px;
	}
	#maintop .update {		
		flot: right;
		width: 250px;
	}
/** END index top **/
2

Anyone? See the pic I attached int he last post. I can not get this to work, someone surely knows where I am making my mistake.

3

I only want this to be a max of 200px high. Also, I removed that line of code, and it made the divs fit … one on top of the other … I want them all to be in a row, see pic attached.

4

#maintop {
float:left;
font-family:Arial;
height:200px;<!-- Remove the height mentioned –>
width:1000px;
}