HTML layout for a div - html

Question

How can I produce a div that will have the following layout so I could make its contents to adjust when is resized? How should i structure this, so I could make use of media queries? Do I need to have another div that will wrap all of this?
+-----------+---------------------------------------+
+ + Title +
+Image + Description +
+ + +
+-----------+---------------------------------------+
+Another container +
+ +
+---------------------------------------------------+
Update:
Used both answers and came up with
http://jsfiddle.net/EzV4R/10/

Answer 1

If you want to make the most of CSS3 and do away with inline styles (bad) and floats, try:
Demo Fiddle
It has the added benefits of:
Resizing with the page
Minimizing the cell containing the image to only the image size (width)
HTML
<div class='table'>
<div class='cell'>Image</div>
<div class='cell'>Title<br />Description</div>
<div class='caption'>Another container </div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
}
.cell :first-child{
width:1%;
}
.caption {
display:table-caption;
caption-side:bottom;
}
.cell, .caption {
border:1px solid black;
}

Answer 2

I always like to wrap structures but it is not necessary, so I would try this:
HTML
<div id="main" class="wrapper">
<div id="topleft" class="left"></div>
<div id="topright" class="right"></div>
<div style = "clear:both">
<div id="container"></div>
</div>
CSS
#main {size that you want}
#topleft {size that you want}
#topright {size that you want}
.left { float: left; }
.right { float: right; }
#container { width: 100% }

Answer 3

<div id="topleft" style="float:left">TOPLEFT</div>
<div id="topright" style="float:right">TOPRIGHT</div>
<div id="container" style="clear:both">CONTAINER</div>

Answer 4

Try this:
<div >
<div style="float:left width:50%">Image</div>
<div style="float:right width:50%">
<div >Title</div>
<div >Description </div>
</div>
</div>
<div style=" width:100%">Another container </div>

Answer 5

<div id="main">
<div id="logo"></div>
<div id="desc"></div>
<div id="clr"></div>
<div id="content"></div>
</div>
CSS :
#main {margin:0;padding:0;}
#logo {width:20%;float:left;}
#desc {width:80%;float:left;}
#clr{width:100%;clear:both;}
#content{width:100%;}

Answer 6

<section>
<div class="inlineImg">
<!-- image -->
</div>
<aside>
<h3>Title</h3>
<p>Description</p>
</aside>
</section>
<section id="other">Another Container</section>
CSS:
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
overflow: hidden;
background-color: green;
}
div.inlineImg {
background-color: blue;
width: 40%;
height: 100px;
float: left;
}
aside {
width: 60%;
height: 100px;
background-color: red;
float: left;
}
#other {
height: 100px;
}
JSFiddle