Order div elements with css

Question

<!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?

there are some errors in your markup some elments are not balanced — happymacarts
– happymacarts, Commented Apr 25, 2017 at 17:33
@Danix - Could you please accept my answer if it helped you? :) — Muhammad Qasim
– Muhammad Qasim, Commented Apr 25, 2017 at 18:46

Muhammad Qasim · Accepted Answer · 2017-04-25 17:32:18Z

1

Using flexbox, this is easy to achieve.

Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.

The example markup:

<div class="wrapper">
    <header>I'm a 30px tall header</header>
    <main>I'm the main-content filling the void!</main>
    <footer>I'm a 30px tall footer</footer>
</div>

The related CSS would be:

.wrapper {
   height: 100vh;
   display: flex;

   /* Direction of the items, can be row or column */
   flex-direction: column;
}

header,
footer {
    height: 30px;
}

main {
    flex: 1;
}

answered Apr 25, 2017 at 17:32

Muhammad Qasim

1,73217 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yolo · Accepted Answer · 2017-04-25 17:35:29Z

A quick google search should do.. but here you go. ONE way to do it.

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

#header,
#footer {
  width: 100%;
  position: fixed;
  background: #333;
  padding: 10px 0;
  color: #fff;
}

#header {
  top: 0;
}

#footer {
  bottom: 0;
}

.chatArea {
  width: 80%;
  margin: 0 auto;
}

<!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 id="footer" 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>

Serg Chernata · Accepted Answer · 2017-04-25 17:36:48Z

Flexbox to the rescue.

Using your structure. Color coded.

body{display:flex; flex-direction: column; height: 100vh;}

#header{height: 100px; background: green;}
.chatArea{flex-grow: 1; align-self:stretch; background: blue;}
.inputContainer{height: 100px; align-self: flex-end; width: 100%; background: red;}

<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>

Vijay Vj · Accepted Answer · 2017-04-25 17:53:54Z

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Chat</title>
        <link rel="stylesheet" href="css/style.css">
        <style>
            boduy{
                width: 100%;
                height: 100%;
            }
            .container{
                position: relative;
                height: 250px;
                width:400px;
                border-style: dashed;
                left:100px;
                top:200px;
            }


            #header{
                text-align: center;
            }
            #buttons{
                position: relative;
                text-align: center;

            }
            #buttonRoom  {
                position:relative;
                border-radius: 5px;
                background-color: burlywood;
            }
            #buttonLobby{
                position:relative;
                border-radius: 5px;
                background-color: burlywood;
            }
            .inputContainer{
                position:relative;
                margin-top: 30px;
                text-align: center;
            }
            #send-button{
                position:relative;
                margin-top: 20px;
                text-align: center;

            }
        </style>
    </head>

    <body>
        <div class="container">
            <div id="header">   
                <h1 id="titleRoom"></h1>
                <h3>Online Users:</h3>
           </div>     
                <div id="online_users"></div>
           <div id="buttons">

                <button id="buttonRoom" type="button" name="button">Create Chatroom</button><button id="buttonLobby" type="button" name="button">Back Lobby</button>
           </div>       

                <div class='inputContainer'>
                    <textarea id="text-area" rows="5" cols="50" placeholder="Type here..."></textarea>
                </div> 
                <div id="send-button">
                    <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>
    </div>            
    </body>
</html>

Collectives™ on Stack Overflow

Order div elements with css

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related