Write 2 button in HTML DOM on the right side of the screen from left to right

Question

I wrote my DOM structure like :

 <button style="float:right">button1</button>
 <button style="float:right">button2</button>
 <button style="float:left">button3</button>
 <button style="float:left">button4</button>

and it will display like : https://jsfiddle.net/ospv6vn8/3/

button3 button4 button2 button1

but i want to render them like :

button4 button3 button1 button2

I can't modify my DOM structure, yes I can edit styles to get the desired look.

just change the text button4 to button3..you need 4 button together ? — Kishan Oza, Feb 22 '17 at 17:52
According to my problem. DOM must remain same like button 1,2,3,4 but I want it to render as button4 button3 button1 button2. where button 4 and 3 are on left side of screen and 1 and 2 are on right side of the screen — Shivam, Feb 22 '17 at 17:58
Can we make it by changing the style, position of the element via styles. — Shivam, Feb 22 '17 at 18:01
look this output and then tell what u want now [link](https://jsfiddle.net/ikishan/ospv6vn8/23/) — Kishan Oza, Feb 22 '17 at 18:03
Okey, but this is not the desired output. My desired output is : button4 button3 <-- on left side --same row-- on right side --> button1 button2 — Shivam, Feb 22 '17 at 18:07
i think it is not possible to do without changing DOM struct — Kishan Oza, Feb 22 '17 at 18:11

TechEndling · Accepted Answer · 2017-02-22T18:31:08.237

1

EDITED: THIS WORKS! You could have the first ones use px instead of float and have button 3 float center, like this:

<button style="position: absolute; right: 61px;">button1</button>
<button style="position: absolute; right: 0px;">button2</button>
<button style="float:center;">button3</button>
<button style="float:left;">button4</button>

(always have button1 61px more to the right than button2)

edited Feb 22 '17 at 18:31

answered Feb 22 '17 at 18:13

TechEndling

76
3
12

same thing !! In this case buttons are not come together. – Kishan Oza Feb 22 '17 at 18:13
Thanks for the effort, but still not getting the desired output https://jsfiddle.net/utwz76cy/ here on the right side I want to display **button1 button2** instead of button2 button1 – Shivam Feb 22 '17 at 18:17
Use px instead of float for the first two, that should work. Always have button1 be 61px more to the right – TechEndling Feb 22 '17 at 18:24
Kishan oza that has a slight space inbetween, as it uses percentages then on each screen size it will look different, better to use px as it will stay the same – TechEndling Feb 22 '17 at 18:29
You could have the first ones use px instead of float and have button 3 float center, like this: (always have button1 61px more to the right than button2) – TechEndling Feb 22 '17 at 18:30
Guys, using hard coded pixel value is a bad solution. :( – Shivam Feb 22 '17 at 18:34
I am researching about some CSS properties that would do work for me – Shivam Feb 22 '17 at 18:35
Fairly sure its the only way but if you find anything post it! i'd be interested to see – TechEndling Feb 22 '17 at 18:53

Write 2 button in HTML DOM on the right side of the screen from left to right

1 Answers1