Image and Text position

[amsmota]

Hi, i'm new in here, i'm trying to solve this problem in other resources but couldn't do it completly.

The problem:

I have a IMAGE and a TEXT. I want my IMAGE to display on the left half side of my page and the TEXT on the right half side. EXCEPT when the image width > 50% of the page, in wich case i want the text to appear under the image.

After playing around with lots of float:left & right, i come to this partial solution:

  <div style="width=45%; display:inline; overflow: visible"> 
  <%=IMAGE%> 
  </div> 
  <div style="display:inline; width=45%; vertical-align:top; text-align:justify; padding:10px;">
   <%=TEXT%> 
  </div>

It work's allmost OK, the only problem is that when the text appears under the image it limit's itself to 45% of the page, and in that case i want it to spread the full page.

I've looked at min- and max-width, but it seems that it won't work in IE (go wonder...). I also look at this
"hack" but i didn't understand it.

After this, i've tryed with

  <div id="imagem" style="display:inline; width:45%;">
   <%=IMAGE%>
  </div>
  <div style="display:inline; vertical-align:top; width:expression(document.getElementById('imagem').offsetWidth);">
   <%=TEXT%>
  </div>

that solves the 45% text width, but limits it to the image width. I eventually solve this toio by using a more complex expression.

However, there are problems still:

First, it's a IE only solution (id didn't know that). That's not a immediate problem cause the work i'm doing is aimed at IE only (to my regret). However, i feel unconfortable with that.

Second, it seems the (expression) is being evaluated all the time (i put an alert() in the middle of it and i got scared...). However, it's working now exactly how i wanted to do it (if the image is bigger than half the parent, the text go under it with a span of 90% of the parent).

So my question is, is there a "pure" CSS solution to this? Afterwards it seems a "trivial" thing people want to do...

Thanks all for your help.

[alias]

Make sure the CSS for the first two items is width:45% and not width=45% ;)

[amsmota]

Shure, ofcourse, that was a typo, the original is correct...

:)