HTML - How to make these divs stay in one line?

Question

I want to have three div elements all in one line. And I want the second one to be scrollable if there are so many elements in it and I want the other two divs on the sides to have fixed widths and I want the div in the middle to take all the space that is left (horizontally).

Whatever I try I can't get the third div to stay in the same line without ruining the way the second div looks. How can I get this to work?

<div style="padding-left:40px; padding-bottom:3px; float:left;" onclick="select(this);" >
    <img style="height:75px; margin-top:20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
</div>
<div style="overflow-x: scroll; overflow-y: hidden; height=150px; white-space: nowrap; margin-right: 130px; margin-left:130px; border-radius: 10px; box-shadow:inset 0 0 10px #000000;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
</div>
<div style="padding-bottom:3px; float:right;" onclick="select(this);" >
    <img style="height:75px; margin-top:20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1"></img>
</div>

in addition to all the link above, better consider the flex solution .. it will solve you issue easily — Temani Afif, Feb 11 '18 at 14:33

score 2 · Answer 1 · edited Feb 11 '18 at 14:35

In all the three div tags use float:left.

DEMO:

<div style="padding-left:40px; padding-bottom:3px; float:left;" onclick="select(this);" >
    <img style="height:75px; margin-top:20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
</div>
<div style="float:left;overflow-x: scroll; overflow-y: hidden; height=150px; white-space: nowrap;width:240px; border-radius: 10px; box-shadow:inset 0 0 10px #000000;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
    <img style="height:75px; margin: 20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
</div>
<div class="last" style="padding-bottom:3px; float:left;" onclick="select(this);" >
    <img style="height:75px; margin-top:20px;" src="https://www.gravatar.com/avatar/68e58b96b428989475e4f3042db71893?s=64&d=identicon&r=PG&f=1">
</div>

You have added width:240px; but I said I want the width to be dynamic. and I don't want to do that with javascript. — Homa Saberi, Feb 11 '18 at 13:27

Sviat Kuzhelev · Answer 2 · 2018-02-11T13:21:29.273

1

You can simple make it by add some class, like "inline" for all divs with style rule "display: inline-block; float: left;"

edited Feb 11 '18 at 13:21

answered Feb 11 '18 at 12:59

Sviat Kuzhelev

1,758
10
28

That does exactly the opposite of what I want! I want them to stay all in the same line. Please consider adding a runnable script. I tried that and it didn't work for me. – Homa Saberi Feb 11 '18 at 13:06

HTML - How to make these divs stay in one line?

2 Answers2