BoeNoe BoeNoe - 2 months ago 19
CSS Question

Space under content in CSS

I have two DIV's. One is for holding the messages. The other for displaying the message content. But I have one problem. There is this big space under both of the DIV's. How do I fix it?



#messages {
border: 1px solid rgb(43, 68, 233);
height: 770px;
width: 300px;
}
#chat-content {
height: 770px;
width: 1283px;
border: 1px solid rgb(43, 68, 233);
position: relative;
left: 300px;
bottom: 770px;
}

<!DOCTYPE html>
<html>

<head>
<link rel='stylesheet' type='text/css' href='style.css'>
<script type='text/javascript' src='jquery-3.1.1.min.js'></script>
<script type='text/javascript' src='jquery-ui.js'></script>
</head>

<body>
<div id='messages'>

</div>
<div id='chat-content'>

</div>
</body>

</html>




Answer

Your second div is positioned 770px from the bottom of the window : bottom: 770px. This is what causes the gap. Since you're dealing with defined, fixed widths, you can just use absolute positioning with top and left. Keep in mind that left on your second div needs to accommodate for border width also (+2px) because your first box is actually 302px wide, not 300 (with the border).

#messages {
   border: 1px solid rgb(43, 68, 233);
   height: 770px;
   width: 300px;
   position:absolute;
   left: 0;
   top: 0;
 }


 #chat-content {
   height: 770px;
   width: 1283px;
   border: 1px solid rgb(43, 68, 233);
   position:absolute;
   left: 302px;
   top: 0;
 }
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' type='text/css' href='style.css'>
    <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
    <script type='text/javascript' src='jquery-ui.js'></script>
</head>

<body>
    <div id='messages'>
    </div>
    <div id='chat-content'>
    </div>
</body>
</html>