Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] alignment issue of 3 elements in a row

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #199189
    knowledgenotebook
    Participant

    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.

    #199190
    Senff
    Participant

    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.

    #199191
    knowledgenotebook
    Participant

    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.

    #199193
    Senff
    Participant

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

    #199194
    Paulie_D
    Member

    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.

    #199202
    knowledgenotebook
    Participant

    @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.

    #199203
    Shikkediel
    Participant

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

    #199205
    Paulie_D
    Member

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

    Can we use Javascript?

    Doubtful if CSS is the solution here.

    #199210
    knowledgenotebook
    Participant

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

    #199211
    knowledgenotebook
    Participant

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

    #199215
    Paulie_D
    Member

    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

    #199216
    Shikkediel
    Participant

    still no go

    ?

    Example

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

    #199306
    knowledgenotebook
    Participant

    “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.

    #199307
    knowledgenotebook
    Participant

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

    #199311
    Paulie_D
    Member

    “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.

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘CSS’ is closed to new topics and replies.