Elements are not appearing next to each other

Question

The problem is that the elements are not appearing next to each other as I want them to.

all three elements are already on float left and in the right order but they are still not lining up in the right way.

(so probably, the problem is that some elements are position:absolute or relative while they don't need to. The problem is: you can't change that without disrupting the drop-up menu of #Timer. That)

 green_button { background-color: #027fed; color: white; border-radius: 2px; cursor: pointer; float: right; position: relative; } .green_button:active { background-color: #eee; color: black; } .keuze { position: absolute; width: 100px; height: 100px; float: left } #timer { color: black; background: #eee; border: none; padding-left: 10px; font-size: 12px; border-radius: 2px; float: left; padding: 12px 12px; cursor: pointer; list-style-type: none; position: Relative; margin-top: -14px; width: 80px; } #timer:hover { color: white; background: #027fed; } li { background-color: #eee; font-size: inherit; width: 150px; position: relative; float: left; bottom: 31px; left: 0; display: block; font-size: 12px; text-decoration: none; font-family: tahoma; color: black; width: 50px; height: auto; border: 1px solid #; border-width: 1px 1px 0 0; background: #eee; background-color: rgb(238, 238, 238); padding-left: 10px; line-height: 38px; border-radius: 2px; height: auto; line-height: 1em; padding: 5px 10px; width: 129px; margin-bottom: 1px; margin-left: 431px; } li:hover { cursor: pointer; background-color: #027fed; color: white } .list { display: none; list-style-type: none; position: absolute !important; } .keuze:hover .list { display: block } .messages_compose { padding: 10px; margin-bottom: auto; } .messages_textarea_container { display: inline-block; width: 400px; margin-left: 10px; } .messages_textarea { border: 3px solid lightgray; margin-top: 0; margin-bottom: 10px; padding: 5px; width: 400px; height: 40px; resize: none; float: left; border-radius: 2px; position: absolute; } .button { border: none; font-size: 12px; padding: 12px 12px; height: 40px text-align: center; } 

 <div class="messages_compose"> <div class="vraag">CV</div> <div class="messages_textarea_container"> <textarea class="messages_textarea"></textarea> <button class="button green_button">Stuur</button> <ul class="keuze"> <button id="timer">1 Jaar</button> <div class="list"> <li id="jaar">jaar</li> <li id="maand">maand</li> <li id="week">week</li> <li id="dag">dag</li> </div> </ul> </div> <script> document.getElementById("jaar").onclick = function() { jaar() }; document.getElementById("maand").onclick = function() { maand() }; document.getElementById("week").onclick = function() { week() }; document.getElementById("dag").onclick = function() { dag() }; </script> <script src="../scripten.js"></script> </div> 

Answer 1

If you want them side by side (if width allows), to make things simpler, make sure they are inline elements.

textarea and button are inline elements by default and unsorted-list are block element by default

Inline Elements

Block Elements

So basically, all you need is to change your ul to display: inline-block;

 * { padding: 0; margin: 0; vertical-align: text-top; } green_button { background-color: #027fed; color: white; border-radius: 2px; cursor: pointer; } .green_button:active { background-color: #eee; color: black; } .keuze { display: inline-block; /* added */ width: 100px; list-style: none; } .keuze li { width: 100%; } #timer { color: black; background: #eee; border: none; padding-left: 10px; font-size: 12px; border-radius: 2px; padding: 12px 12px; cursor: pointer; list-style-type: none; width: 80px; } 

 <div class="messages_compose"> <div class="vraag">CV</div> <div class="messages_textarea_container"> <textarea class="messages_textarea"></textarea> <button class="button green_button">Stuur</button> <ul class="keuze"> <button id="timer">1 Jaar</button> <div class="list"> <li id="jaar">jaar</li> <li id="maand">maand</li> <li id="week">week</li> <li id="dag">dag</li> </div> </ul> </div> </div> 

In addition, I have removed all your float and position from your css which I think as @Temani Afif says, you were just trying fix the issue by adding more to it.

I also have added followings just to make it tidier which is irrelevant to your issue. (That is to remove the default margin, padding and vertical align from all html elements to make it tidier and avoid unexpected behavior of different browsers)

* {
  padding: 0;
  margin: 0;
  vertical-align: text-top;
}