How do you make a div display two inline items that stretch the width?

Question

It's hard for me to explain, so I'll start with a picture:

I'm working on a video chat server using WebRTC for a class. The server portion isn't the hard part, it's making everything pretty. What I am trying to do, if at all possible is make a scrollable div tag that contains the chat, and to the right of it, put the local video stream.

Below is the code for adding the local video stream.

    var onLocalStream = function (stream) {
        $("#chatArea").css({ right: ($(window).width()) - 175 })

        var video = $("<video>").attr({
            autoplay: "autoplay", id: stream.id, height: "150px", width: "170px", float: "right", display: "inline"

        }).bind("click", { streamId: stream.id }, function (args) {
            RTCConnection.removeStream(args.data.streamId, function (id) {
                console.log("Local stream removed", id);
            });
            $(this).remove();
        }).appendTo("#ChatAndVideo");
        attachMediaStream($(video).get(0), stream);
    };

This gets bound to the RTCConnection that is made later. My attempt was to shrink the chatArea by enough to fit the video to the right of it. The click event is really just for testing and will be removed later.

Now here is the HTML for the area I'm trying to append to.

<div id="ChatAndVideo">
    <div id="chatArea" style="width: auto; height: 100px; overflow: auto; overflow-y: scroll; outline-color:black; outline:auto">
        <p id="chat"></p>
    </div>
</div>

And eventually I do plan on cleaning this up some and putting the CSS in a separate file, but I didn't want to worry about that till it was working.

This question has probably been answered in some way already, but I'm not really sure how to search for it. What little knowledge I have of HTML, CSS, and JavaScript is all self taught, so thank you in advanced for any feedback!

Answer 1

You'll definitely want to cleanup/simplify your markup. Here's a suggestion:

<style>
.half {
  border: 1px solid;
  height: 200px;
  display: inline-block;
  width: 40%;
  padding: 2.5%;
  box-sizing: border-box;
}
.half:first-of-type {
    overflow: scroll;
}
.container {
  display: inline-block;
  width: 100%;
}
</style>

<div class="container">
    <div class="half">
        <div id="chat">

        </div>
    <div class="half">
        <div id="video">

        </div>
    </div>    
</div>

I would then recommend specifically targeting the divs for the chat/video feeds with your script. This simplifies your script and makes more sense. Also, always try to avoid doing css styles through Javascript/jQuery—the best way to handle that would be to assign a class to the element that contains the CSS you wish to apply.

Hope this helps.