Question

I’m going nuts over trying to achieve this simple design with divs and spans instead of tables, tds and trs (I got it working with tables so far)

Simple design:

• 2 Objects on the left: floating to the left, vertically centered.
• 1 on the right: floating to the right, vertically sent to the bottom.
• All components are on the same line.

I was kinda of hoping this would be easy to write but I found it excruciatingly difficult.
The float tag cancels the vertical-align tag and I can’t get it to work for no combination of styles/divs/spans.

TnX For The Help…

Answer 1

Something like this? http://jsfiddle.net/mattball/6k8uZ/

HTML

<div id="zero">
    <img id="one" src="http://placekitten.com/100/100"/>
    <span id="two">General Configuration</span>
    <span id="three">TEST2</span>
</div>

CSS

#zero {
    height: 100px;
    position: relative;
    border: 1px solid #CCC;
}

#one, #two {
    float: left;
    line-height: 100px;
}

#three {
    position: absolute;
    right: 0;
    bottom: 0;
}