tableless CSS problem

Question

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 minimum 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

Answer 1

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;
}