Need help keeping elements in columns

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Need help keeping elements in columns

Post 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?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post 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 :)
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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:
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Code: Select all

	li { clear:left; }
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Cool beans. That did the trick.

Thanks everyone!
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply