[Solved] alignment issue of 3 elements in a row

[knowledgenotebook]

Hi,

I have 3 elements in a row, namely, an input box, one text formatting function and one navigation aid. For the last two I’d like them Right-aligned in the order of ‘formatting function’ (named indent), a white space, and then the ‘navigation aid’ (named expand).
Please see the following codepen for what I mean:
http://codepen.io/knowledgenotebook/pen/RNdLgG

How to fix it?
Many thanks.

[Senff]

For starters, take away the widths of the buttons an give them some left/right margins.

Then give the wrapping element (in your case, TD) a specific width in pixels. 600 or so.

[knowledgenotebook]

Thanks for the idea. However, problem remains. In the meantime, I reverse the order the last two elements to temporarily get what I need, and yet, it’s not a desirable solution. And I prefer not to set a fixed width for the TD since this screen/panel may expand to cover the 95% of the user’s entire window. Hmm, something still isn’t right.

[Senff]

You need to be more clear what you exactly want then.

[Paulie_D]

I see you’re still posting Codepen’s with inline CSS….this really isn’t helpful.

I’m inclined to help but you keep making me work for it…you’re going about it the wrong way.

[knowledgenotebook]

@Paulie_D, fair enough. I’ve separated the CSS code from HTML now. And I have two images files in the same location as the HTML file, however, the two image icons are not being referenced. Why not?

Thanks.

[Shikkediel]

The path in your CSS would need to be absolute, like url(http://www.yoursite.com/imagefolder/indent.png).

[Paulie_D]

So…what are our options…can we change the HTML?

Can we use Javascript?

Doubtful if CSS is the solution here.

[knowledgenotebook]

@Shikkediel, I’ve made the change for the URL reference, still no go. Hmm…

[knowledgenotebook]

“can we change the HTML?”, sure, what needs to be changed for the HTML? tks.

[Paulie_D]

Remove all the extraneous margins & stuff…throw a span around the two elements you need on the right and float that right.

http://codepen.io/Paulie-D/pen/KwEQjJ

[Shikkediel]

still no go

?

Example

It’s a nice button by the way (Inkscape experiment) :

[knowledgenotebook]

“Remove all the extraneous margins & stuff…throw a span around the two elements you need on the right and float that right.”, yes, I did, but the images were not showing up. The text icon is not cool at all. Thanks tho.

[knowledgenotebook]

@Shikkediel, No, I don’t need button for this.

[Paulie_D]

“Remove all the extraneous margins & stuff…throw a span around the two elements you need on the right and float that right.”, yes, I did, but the images were not showing up. The text icon is not cool at all. Thanks tho.

What does that mean?

Your original question was about layout. Is that solved?

The images not showing up is an entirely separate issue.

[Author]

Posts