spacing display: inline elements

Discussion in 'HTML' started by Ivan Shmakov, Mar 2, 2013.

  1. Ivan Shmakov

    Ivan Shmakov Guest

    Is there an easy way to arrange a known number of
    display: inline so that the last has its "natural" width, while
    the rest of the window's width is distributed equally among the
    other elements? Like:

    [element 1] [elt 2] [element 3] ["natural" width for the last one]

    Also, how do I ensure certain spacing between the elements? The
    only way I could think of is something like (for 1em spacing):

    ..elt-first {
    margin-left: 0;
    margin-right: .5em;
    }
    ..elt-middle {
    margin-left: .5em;
    margin-right: .5em;
    }
    ..elt-last {
    margin-left: .5em;
    margin-right: 0;
    }

    However, it's mildly inconvenient, as it requires all the
    elements to be explicitly tagged as "first", "middle", and
    "last." Or should I be using some kind of a "spacer" element
    in-between the "payload" ones?

    ..spacer { width: 1em; }

    TIA.

    --
    FSF associate member #7257 np. Out of the Shadows -- Iron Maiden
    Ivan Shmakov, Mar 2, 2013
    #1
    1. Advertising

  2. Ivan Shmakov

    123Jim Guest

    On 02/03/2013 08:18, Ivan Shmakov wrote:
    > Is there an easy way to arrange a known number of
    > display: inline so that the last has its "natural" width, while
    > the rest of the window's width is distributed equally among the
    > other elements? Like:
    >
    > [element 1] [elt 2] [element 3] ["natural" width for the last one]
    >
    > Also, how do I ensure certain spacing between the elements? The
    > only way I could think of is something like (for 1em spacing):
    >
    > .elt-first {
    > margin-left: 0;
    > margin-right: .5em;
    > }
    > .elt-middle {
    > margin-left: .5em;
    > margin-right: .5em;
    > }
    > .elt-last {
    > margin-left: .5em;
    > margin-right: 0;
    > }
    >
    > However, it's mildly inconvenient, as it requires all the
    > elements to be explicitly tagged as "first", "middle", and
    > "last." Or should I be using some kind of a "spacer" element
    > in-between the "payload" ones?
    >
    > .spacer { width: 1em; }
    >
    > TIA.
    >



    Put them in a container <div>, apply padding to it. then use the same
    margin across all of the elements contained therein.
    http://www.w3.org/TR/CSS2/box.html
    123Jim, Mar 2, 2013
    #2
    1. Advertising

  3. Ivan Shmakov

    123Jim Guest

    On 02/03/2013 08:46, 123Jim wrote:
    > On 02/03/2013 08:18, Ivan Shmakov wrote:
    >> Is there an easy way to arrange a known number of
    >> display: inline so that the last has its "natural" width, while
    >> the rest of the window's width is distributed equally among the
    >> other elements? Like:
    >>
    >> [element 1] [elt 2] [element 3] ["natural" width for the
    >> last one]
    >>
    >> Also, how do I ensure certain spacing between the elements? The
    >> only way I could think of is something like (for 1em spacing):
    >>
    >> .elt-first {
    >> margin-left: 0;
    >> margin-right: .5em;
    >> }
    >> .elt-middle {
    >> margin-left: .5em;
    >> margin-right: .5em;
    >> }
    >> .elt-last {
    >> margin-left: .5em;
    >> margin-right: 0;
    >> }
    >>
    >> However, it's mildly inconvenient, as it requires all the
    >> elements to be explicitly tagged as "first", "middle", and
    >> "last." Or should I be using some kind of a "spacer" element
    >> in-between the "payload" ones?
    >>
    >> .spacer { width: 1em; }
    >>
    >> TIA.
    >>

    >
    >
    > Put them in a container <div>, apply padding to it. then use the same
    > margin across all of the elements contained therein.
    > http://www.w3.org/TR/CSS2/box.html


    In respect of the last element having a natural width you can do
    something with max-width but again apply it to all your boxes, as you
    won't know which box would be the right most box due to the variability
    of Browser window width.
    123Jim, Mar 2, 2013
    #3
  4. Ivan Shmakov

    dorayme Guest

    In article <>,
    Ivan Shmakov <> wrote:

    > Is there an easy way to arrange a known number of
    > display: inline so that the last has its "natural" width, while
    > the rest of the window's width is distributed equally among the
    > other elements? Like:
    >
    > [element 1] [elt 2] [element 3] ["natural" width for the last one]
    >


    What is a *natural* width for something (an element perhaps) that goes
    inline? An image that is natively 200px wide perhaps? An anonymous box
    of text? A span? A floated div with normal shrink-to-fit property?

    Anyway, if the three (or other number) of elements are to be spaced
    evenly (and not according to their "natural" width?), then perhaps
    best to make a container for these three, margin or padding the
    contents evenly (padding-right for all but the last of the children),
    float the container itself left, if it is a DIV say, to get the
    shrink-to-fit effect and then add the last inline element. If the
    first three are not to be their natural width, what are you
    contemplating, that they be given an unnatural width?

    Remember that the browser viewport might not be wide enough to allow
    what you are aiming for, the last element (or indeed, other elements
    unless you make special provisions) can drop and wrap.


    > Also, how do I ensure certain spacing between the elements? The
    > only way I could think of is something like (for 1em spacing):
    >
    > .elt-first {
    > margin-left: 0;
    > margin-right: .5em;
    > }
    > .elt-middle {
    > margin-left: .5em;
    > margin-right: .5em;
    > }
    > .elt-last {
    > margin-left: .5em;
    > margin-right: 0;
    > }
    >


    If you have three elements, there are other ways to target them
    without creating classes for all. For example, if there are three
    SPANS in a DIV (and no other DIV has spans), you can just class the
    last and

    div span {margin-right: .5em;}
    div .last {margin-right: 0;}

    > However, it's mildly inconvenient, as it requires all the
    > elements to be explicitly tagged as "first", "middle", and
    > "last." Or should I be using some kind of a "spacer" element
    > in-between the "payload" ones?
    >
    > .spacer { width: 1em; }
    >

    Don't do this last, it is too inelegant.

    Above all, how about a real URL with some real markup and example so
    we can see what you might be doing?

    --
    dorayme
    dorayme, Mar 2, 2013
    #4
  5. Ivan Shmakov

    Ivan Shmakov Guest

    >>>>> dorayme <> writes:

    [...]

    > Remember that the browser viewport might not be wide enough to allow
    > what you are aiming for, the last element (or indeed, other elements
    > unless you make special provisions) can drop and wrap.


    Yes. I find it acceptable, though.

    [...]

    > If you have three elements, there are other ways to target them
    > without creating classes for all. For example, if there are three
    > SPANS in a DIV (and no other DIV has spans), you can just class the
    > last and


    > div span {margin-right: .5em;}
    > div .last {margin-right: 0;}


    Indeed, that's much better. Thanks!

    (Still, I'd prefer not to add any special classes just for a
    purpose like this. As in: given two adjacent margins, the
    largest would "magically win" and be used instead of both.)

    BTW, there's a similar problem for display: block elements, and
    margin-top:, margin-bottom:. I guess a solution like the above
    will fit this case, too.

    [...]

    > Above all, how about a real URL with some real markup and example so
    > we can see what you might be doing?


    Not at this moment.

    --
    FSF associate member #7257
    Ivan Shmakov, Mar 3, 2013
    #5
  6. Ivan Shmakov

    dorayme Guest

    In article <>,
    Ivan Shmakov <> wrote:

    > >>>>> dorayme <> writes:

    >
    > [...]


    > > If you have three elements, there are other ways to target them
    > > without creating classes for all. For example, if there are three
    > > SPANS in a DIV (and no other DIV has spans), you can just class the
    > > last and

    >
    > > div span {margin-right: .5em;}
    > > div .last {margin-right: 0;}

    >
    > Indeed, that's much better. Thanks!
    >
    > (Still, I'd prefer not to add any special classes just for a
    > purpose like this. As in: given two adjacent margins, the
    > largest would "magically win" and be used instead of both.)
    >


    Depending on your exact situation, you can even do without any
    classing. For example if there is an element with three sibling spans
    inside like

    <div>
    <span>text</span>
    <span>text</span>
    <span>text</span>
    </div>

    you can target all of them with styles by using adjacent sibling
    selecting

    span {padding-right: 5em;}
    span+span+span {padding-right: 0;}

    --
    dorayme
    dorayme, Mar 3, 2013
    #6
  7. Ivan Shmakov

    Ivan Shmakov Guest

    >>>>> dorayme <> writes:
    >>>>> Ivan Shmakov <> wrote:
    >>>>> dorayme <> writes:


    [...]

    >>> div span {margin-right: .5em;}
    >>> div .last {margin-right: 0;}


    >> Indeed, that's much better. Thanks!


    >> (Still, I'd prefer not to add any special classes just for a purpose
    >> like this. As in: given two adjacent margins, the largest would
    >> "magically win" and be used instead of both.)


    > Depending on your exact situation, you can even do without any
    > classing. For example if there is an element with three sibling
    > spans inside like


    > <div>
    > <span>text</span>
    > <span>text</span>
    > <span>text</span>
    > </div>


    > you can target all of them with styles by using adjacent sibling
    > selecting


    > span {padding-right: 5em;}
    > span+span+span {padding-right: 0;}


    Unfortunately, I may have several contexts like that, each
    having different number of children.

    However, I've found that CSS3 adds a number of what they call
    "structural pseudo-classes" [1], including :last-child (CSS2
    already had :first-child), :first-of-type, and :last-of-type.

    Thus, my .css now reads:

    ..login-form > p,
    ..update-type > p {
    display: inline;
    margin-left: .71ex;
    margin-right: .71ex;
    padding: 0;
    }

    ..login-form > p:first-of-type,
    ..update-type > p:first-of-type {
    margin-left: 0;
    }

    ..login-form > p:last-of-type,
    ..update-type > p:last-of-type {
    margin-right: 0;
    }

    Now, it makes me wonder how widely these pseudo-classes are
    implemented nowadays? (Then, however, I've used a few of the
    HTML5 elements just as well...)

    [1] http://www.w3.org/TR/css3-selectors/#structural-pseudos

    >> BTW, there's a similar problem for display: block elements, and
    >> margin-top:, margin-bottom:. I guess a solution like the above will
    >> fit this case, too.


    Curiously enough, this is exactly how top and bottom margins
    appear to work in my Firefox (or, rather, Iceweasel, as of
    10.0.12esr debian 1.) Still, it may be necessary to amend the
    margins of the topmost and bottommost elements. Like, e. g.:

    article > *, body > * {
    margin-top: 3.14ex;
    margin-bottom: 3.14ex;
    }

    article > :first-child, body > :first-child {
    margin-top: 0;
    }

    article > :last-child, body > :last-child {
    margin-bottom: 0;
    }

    --
    FSF associate member #7257
    Ivan Shmakov, Mar 4, 2013
    #7
  8. Ivan Shmakov

    dorayme Guest

    In article <>,
    Ivan Shmakov <> wrote:

    > >>>>> dorayme <> writes:
    > >>>>> Ivan Shmakov <> wrote:
    > >>>>> dorayme <> writes:

    >
    > [...]
    >
    >
    > > you can target all of them with styles by using adjacent sibling
    > > selecting

    >
    > > span {padding-right: 5em;}
    > > span+span+span {padding-right: 0;}

    >
    > Unfortunately, I may have several contexts like that, each
    > having different number of children.
    >
    > However, I've found that CSS3 adds a number of what they call
    > "structural pseudo-classes" [1], including :last-child (CSS2
    > already had :first-child), :first-of-type, and :last-of-type.
    >

    Good point. But check to see how IE handles such (IE8 and below are
    not likely to)
    >
    > Now, it makes me wonder how widely these pseudo-classes are
    > implemented nowadays? (Then, however, I've used a few of the
    > HTML5 elements just as well...)
    >
    > [1] http://www.w3.org/TR/css3-selectors/#structural-pseudos
    >


    --
    dorayme
    dorayme, Mar 5, 2013
    #8
  9. Ivan Shmakov

    Gus Richter Guest

    On 3/4/2013 7:01 AM, Ivan Shmakov wrote:
    > Now, it makes me wonder how widely these pseudo-classes are
    > implemented nowadays?


    <http://caniuse.com/#search=css3%20selectors>

    --
    Gus
    Gus Richter, Mar 5, 2013
    #9
  10. Ivan Shmakov

    Ivan Shmakov Guest

    >>>>> dorayme <> writes:
    >>>>> Ivan Shmakov <> wrote:


    [...]

    >> However, I've found that CSS3 adds a number of what they call
    >> "structural pseudo-classes" [1], including :last-child (CSS2 already
    >> had :first-child), :first-of-type, and :last-of-type.


    > Good point. But check to see how IE handles such (IE8 and below are
    > not likely to)


    Neither these support XML-based HTML (application/xhtml+xml),
    which I also happen to use.

    Perhaps I will implement some hacks to get around these issues
    (first and foremost the XHTML vs. XML one), but given that the
    pages in question are, to some extent, oriented at "network
    professionals," I'd expect that the majority of those interested
    will use a more standards-compliant Web agent, anyway.

    >> Now, it makes me wonder how widely these pseudo-classes are
    >> implemented nowadays? (Then, however, I've used a few of the HTML5
    >> elements just as well...)


    >> [1] http://www.w3.org/TR/css3-selectors/#structural-pseudos


    --
    FSF associate member #7257
    Ivan Shmakov, Mar 5, 2013
    #10
  11. Ivan Shmakov

    Ivan Shmakov Guest

    CSS3 selectors

    >>>>> Gus Richter <> writes:
    >>>>> On 3/4/2013 7:01 AM, Ivan Shmakov wrote:


    >> Now, it makes me wonder how widely these pseudo-classes are
    >> implemented nowadays?


    > <http://caniuse.com/#search=css3%20selectors>


    Looks good. Thanks!

    --
    FSF associate member #7257
    Ivan Shmakov, Mar 6, 2013
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. fitwell
    Replies:
    7
    Views:
    736
    Sid Ismail
    Nov 19, 2003
  2. Abhi
    Replies:
    2
    Views:
    723
    E. Robert Tisdale
    Jul 3, 2003
  3. Alvin
    Replies:
    7
    Views:
    463
    E. Robert Tisdale
    May 6, 2005
  4. Replies:
    3
    Views:
    445
  5. Evertjan.
    Replies:
    6
    Views:
    120
    Evertjan.
    Apr 9, 2009
Loading...

Share This Page