Annoying Div Problem

I'm trying to get 3 divs to behave them selves and align properly but I can't seem to get it right without using <br> which is giving too big a gap.

DIV1 DIV2 DIV3

I want DIV1 to the top left, DIV2 to the right of DIV1 and DIV3 under DIV2

DIV1 DIV2
NODIV DIV3
That's the kind of style I'm looking for...

<div class="headingtitle"><img src="images/about.gif"></div>

<div class="heading">Career Objective</div>
<br><br>
<div class="text">asda</div>

HTML:

.headingtitle {
	float:left;
}

.heading {
	float:left;
	color:#09baec;
	font-family: Impact, Charcoal, sans-serif;
	font-size:16.15pt;
	margin-left:2px;
	margin-bottom:2px;
}

.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10pt;
	color:#333333;
	float:left;
	margin-left:2px;
}

Code (markup):

What am I doing wrong?

 

Fixed...

HTML

<div id="imgheading"><img src="images/about.gif"></div>
<div id="bottom">
    <div id="headtitle"><h1>Sub Title</h1></div>
  <div id="top">Text</div>
</div>

HTML:

CSS

#container{
    width: 1000px;
}
#text{
    width:900px;
    height:50px;
    z-index: 999;
	font-size:10pt;
	font-family: Arial, Helvetica, sans-serif;
}

#headtitle {

}

#headtitle h1 {
	font-family:arial;
	font-size:16.15pt;
	color:#09baec;
	margin:0px;
	padding:0px;
}

#imgheading {
	float:left;
	height:70px;
}

Code (markup):

 

I'm just stuck wondering what you need all those DIV for... particularly the one wrapping the IMG (which smells presentational to me) and the one wrapping the H1... What are you doing that couldn't be applied to the semantic tags directly (and/or might not even warrant a tag in the case of the IMG)

I'd have to see what you're doing, but much as George Carlin said "Not every ejaculation deserves a name" I think you may be falling into the trap of wrapping endless pointless DIV, ID and Classes around things in your code -- for no good reason. In fact I have the sneaking suspicion that for what you have there it's entirely likely I'd have JUST a H1.