X X ----------------
X X ----------------
X X ----------------
--------------------
In the example, 'X' is an image, and '----' is text. You can see in the bottom element, the text wraps around on the next line. What I'd like to see happen is this:
<ol>
<li>
<img style="float:left">
<input type="image" src="path/to/image" style="float:left">
<div style="float:left">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</li>
<li>
<img style="float:left">
<input type="image" src="path/to/image" style="float:left">
<div style="float:left">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</li>
</ol>
PS: It seems to be working only in IE
PPS: Add width property to the DIV element for IE, Opera, FF
There are 10 types of people in this world, those who understand binary and those who don't
Thanks for the input but:
1) Need to have a solution that works in Firefox too, as that will be the primary browser.
2) Can't restrict the width because the text may contain very specific spacing that I don't want to mess up.
Maybe I should just use tables
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Just float the image (or whatever you have on the left site) to the left, set a width to that, and then set a left-margin a bit larger on the text-box that's supposed to go right of it.
There are other solutions, but I thins is the easiest.
matthijs wrote:set a left-margin a bit larger on the text-box that's supposed to go right of it.
Yes, using a left-margin would be the solution you're after. You don't *need* to give a width to the image, but you should use a left-margin that leaves room for the image.
<ol id = "questions-list" style = "font-size:8pt;">
<li>
<img src = "/include/templates/images/arrow-up-down.png"
style = "cursor: n-resize;vertical-align:top;float:left;"
alt = "Re-order"
title = "Drag up and down to re-order.<br />Note: You must click the save icon to preserve your changes." />
<input type = "image"
src = "/include/templates/images/bin.png"
style = "float:left;"
class = "image delete-icon"
name = "delete"
value = "{$question.id}"
title = "Remove this question from this template"/>
<input type = "hidden"
name = "questions[]"
value = "{$question.id}" />
<div style = "margin-left:30px;">
{$question.text}
</div>
</li>
</ol>
That validates, as does the page in the screenshot. If I take off the "float:left;" style from the '<input type = "image" ' tag, everything lines up nicely. I have never seen this happen before - anyone else?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.