Order div elements with css

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chat</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="header"> <h1 id="titleRoom"></h1> <h3>Online Users:</h3> <div id="online_users"></div></br> <button id="buttonRoom" type="button" name="button">Create Chatroom</button><button id="buttonLobby" type="button" name="button">Back Lobby</button></div> <div class="chatArea"> <ul class="messages"></ul> </div> <div class='inputContainer'> <input class="inputMessage" placeholder="Type here..."/><button id="sendButton" type="button" name="button">Send</button> </div> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="/js/client.js"></script> </body> </html> I need to have always on top <div id="header">, always in buttom <div class='inputContainer'> and in the middle (occuping the rest of the page) <div class="chatArea"> without that <div class="chatArea"> override or be overridden by <div id="header"> or <div class='inputContainer'>. does anyone know the css code to do that?

html css

25th Apr 2017, 5:26 PM

Danix Danilovic

1 ответ

+ 3

use position: absolute; and left: 0; on all three. header gets top: 0; inputContainer gets bottom: 0; the tricky one is the chatArea. use percentages for the heights of all three containers to easily calculate the height for the chat area.

25th Apr 2017, 8:42 PM

Mario L.