Page 1 of 1

Need help keeping elements in columns

Posted: Tue Dec 04, 2007 3:43 pm
by pickle
Hi all,

I've got a list & in each list item there are 2 images, followed by some text. It looks somewhat like this:

Code: Select all

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:

Code: Select all

X X ----------------

X X ----------------

X X ----------------
    ----------------
    ----
I've tried different combinations of "float","position", and "display" properties but to no avail. The markup I've currently gotis like this:

Code: Select all

<ol>
	<li>
		<img>
		<input src="path/to/image">
		<div>
			text
		</div>
	</li>
</ol>
Anyone have any ideas?

Posted: Tue Dec 04, 2007 3:53 pm
by VladSun

Code: Select all

<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 :)

Posted: Tue Dec 04, 2007 4:53 pm
by pickle
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 :twisted:

Posted: Wed Dec 05, 2007 7:40 am
by matthijs
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.

Posted: Wed Dec 05, 2007 7:58 am
by superdezign
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.

Posted: Wed Dec 05, 2007 10:19 am
by pickle
This is weird:
Image

Here's the template code:

Code: Select all

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

Posted: Wed Dec 05, 2007 11:12 am
by matthijs

Code: Select all

	li { clear:left; }

Posted: Thu Dec 06, 2007 2:50 pm
by pickle
Cool beans. That did the trick.

Thanks everyone!