How do I justify inline-block elements inside a
, inside a ?

Question

I have searched for hours and couldn't find a fix to my problem, finally decided to sign up and ask (woohoo, first question). Here is my situation, I have this in my html markup :

<table>
    <tr>
        <td>
            <img />
        </td>
    </tr>
    <tr>
        <td>
            <div style="width:800px;text-align:justify;">
                <input style="width:101px;" />
                <input style="width:101px;" />
                <input style="width:101px;" />
                <input style="width:101px;" />
                <input style="width:101px;" />
                <input style="width:101px;" />
                <input style="width:101px;" />
                <input style="width:101px;" />
                <input style="width:101px;" />
            </div>
        </td>
    </tr>
</table>

Basically, this will be generated by an ASP.Net user control that I am designing at the moment (I don't think it is relevant). But whatever I do, I can't seem to be able to get the images to get justified in the final content. Is it possible that the fact I inserted them in a table cell is not allowing the justified style to function properly?

Before you ask, I tried the display:table / display:table-cell on and trick, didn't work as well.

Also, I am developing with pure Javascript for client side scripts and I don't want a solution involving jQuery (if at all possible). I would prefer simple and elegant html/css.

Can you use flexbox ? http://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Renan Le Caro, Feb 20 '15 at 14:06
possible duplicate of ["text-align: justify;" inline-block elements properly?](http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly) — Paulie_D, Feb 20 '15 at 14:07
"I can't seem to be able to get the images to get justified " - What images? — Turnip, Feb 20 '15 at 14:07
The [inputs are justified](http://jsbin.com/fomolaraka/1/edit?html,output) when I run that code. Possibly what you expect justified to mean isn't what it actually means (i.e. that space between each element should be adjusted so that they are evenly spaced across the entire row, except for the last row which should be left aligned). What effect do you expect to get? — Quentin, Feb 20 '15 at 14:08
Also the math doesn't seem to work. 9 * 101 = 909...which is more than 800. — Paulie_D, Feb 20 '15 at 14:08
I'm looking at the link provided right now. It seems to fit my problem. What would be the generated markup for my problem? — AceShot, Feb 20 '15 at 14:10
Which link? There are three in the comments so far. What do you mean by "generated markup"? — Quentin, Feb 20 '15 at 14:11
The width of the div doesn't fit all the inputs. The width of the inputs combined is bigger than the width of the div which is 800px. Why don't you set the width of the div to auto: **width: auto;**? — Bonga Mbombi, Feb 20 '15 at 14:12
I think this is what the OP is after - http://jsbin.com/mexaheqoce/2/edit?html,css,output — Paulie_D, Feb 20 '15 at 14:13
@Paulie_D I know, it's on purpose so that the box doesn't fit and the elements have space between them. Otherwise, they would "look" justified, but end up simply perfectly aligned to the right edge. — AceShot, Feb 20 '15 at 14:13
@uʍopǝpısdn oops, the original markup had type="image" and src attributes, I removed them for privacy — AceShot, Feb 20 '15 at 14:14
@Paulie_D it worked!!! but I don't understand why it works. Could you comment quickly (if you have time) ? — AceShot, Feb 20 '15 at 14:16
See the linked duplicate question mentioned - http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly — Paulie_D, Feb 20 '15 at 14:17
@Paulie_D my bad, it didn't. I had inadvertently put the width of inputs back to 100px. It still doesn't work. I will try to post an image to show what I mean. — AceShot, Feb 20 '15 at 14:19
[current result](http://imagizer.imageshack.us/a/img661/7946/Rirtu2.png) I have tried @Paulie_D 's trick, it didn't work. I want all images to spread out and align perfectly. I KNOW justify is the way to do it, I used text-book justify methods. I think it might not be working because of the table. What do you guys think? — AceShot, Feb 20 '15 at 14:34
We really need to see what you are after...do you have a design image? — Paulie_D, Feb 20 '15 at 14:35
In all fairness, I can't seem to reproduce the problem in JSBin... — AceShot, Feb 20 '15 at 14:38
Ok, the plot thickens... Here is the problem that I manage to reproduce [JSBin of the problem](http://jsbin.com/wekukozoho/3/edit?html,css,output) . You will notice that tags are all stuck one against each other ?? if I put a line break right after them, it gets correctly justified automatically... that's crazy right?? — AceShot, Feb 20 '15 at 14:44

score 0 · Accepted Answer · answered Feb 20 '15 at 14:55

Ok lovely people, I found my answer. It's really simple too. My code published earlier was not the real one and. Here it is :

<table>  
    <tr>
        <td>
            <div style="width:800px;text-align:justify; border: solid 1px red;">
                <input style="width:101px;" /><input style="width:101px;" /><input style="width:101px;" /><input style="width:101px;" /><input style="width:101px;" /><input style="width:101px;" /><input style="width:101px;" /><input style="width:101px;" /><input style="width:101px;" />
            </div>
        </td>
    </tr>
</table>

I apologize to those that tried to help me without this information. The thing is the "justify" style works by spreading out the spaces in a text or, in the case of inline-block, the spaces between blocks. ASP.Net generated my code in a block without inserting my spaces. Result is that I have a very long "word" of elements without any space breaks at all! And obviously, "justify" doesn't know how to work with that.

So the code should be corrected to include new lines or spaces at least.

Thanks to everyone again! Sorry for the trouble again. I'll post with more info next time.

How do I justify inline-block elements inside a , inside a ?

1 Answers1

How do I justify inline-block elements inside a
, inside a ?