tableless CSS problem

In general I know how to use css but not advanced css So I need some help in order to start. Unfortunately I can't find any good and decent guide for tables without css and the part I want to do is very tricky. So here is what I want and what I've done so far.

The height is not fixed by the way so I want it flexible because the main text might be very long or very small

Here is what I've done so far

http://jsfiddle.net/VmnDj/1/

This doesn't seem to work properly though because the m开发者_如何学JAVAinimum height is where the main text is and it never includes the whole picture. Some part of the picture is out of the container. Please can you contribute on this and explain me why do you have to take each step? My purpose is to learn from this and not just the solution. If you need something more please let me know. Thank you very much in advance

Try this:

JSFIDDLE: http://jsfiddle.net/86FMw/

Notice that there is no fixed height and the box will grow when the main text is longer.

HTML

<div class="cartitem">
    <div class="left">
        <img src="http://images.pictureshunt.com/pics/p/pear-5428.jpg" width="60" height="60" alt=""/>
    </div>
    <div class="toptext">
        top text top text top text
    </div>
    <p>
        text text text text<br/>
        text text text text  text text text text text text text text <br/>
        text text text text text text text text <br/>  
    </p>
    <div class="buttonbar">
        <button>click me</button>
    </div>
</div>

CSS

.cartitem {
    position: relative;
    padding-left: 80px;
    border: 1px solid #333;
}

.left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
}

.toptext {
    background: silver;
}

.buttonbar {
    text-align: right;
}

That layout looks like it would formerly be used in frames.

Try this for the top right DIV: set the code for Text2 to something like this:

p.tab {
  margin-top: -2em;
  margin-left: /* spacer_distance in em/px */;
}

I made 3 columns of text to mimic a table on some of my pages since the text displayed wasn't very wide in the first place.

Keep in mind we now deal with mobile device users. So only having 2 columns in that DIV should work. But, be wary spreading more text across that space without using min-width statements to the entire viewport.