HTML/CSS Layout Floating?

Question

I am trying to layout something that initially needs to look like:

And then, I need to add 2 divs via jQuery to make it look like:

I am trying to put everything into a div container, and then creating other divs for:

• the main square,
• the rectangle at the bottom,
• and then when required a div that contains 2 other divs (the 2 squares).

When the 2 squares are not there, the main square and the bottom rectangle must take the whole width of the container.

I've tried floating left the div containing the 2 squares and some other stuff but I fail.

HTML looks like:

<div id="container">
    <div id="videos">
        <video autoplay muted id="localVideo"></video>
        <br>
        <video autoplay id="remoteVideo"></video>
    </div>
    <div id="chatMessagesWindow"></div>
    <input autofocus="autofocus" placeholder="Enter a message" id="chatInput">
</div>

CSS looks like:

#container {
  width: 850px;
  border: 1px solid black;
  height: 580px;
}

#chatMessagesWindow {
  width: 70%;
  height: 100%;
  border: 9px solid gray;
  margin-bottom: 7px;
  overflow: auto;
  float: right;
}

#chatInput {
  width: 100%;
  height: 35px;
  border: 1px solid gray;
  float: right;
}


#videos {
  display: none;
  width: 30%;
  float: left;
}

#videos video {
  border: 1px solid black;
}

In JavaScript I show .show() the #videos element.

Fiddle: http://jsfiddle.net/67WLG/1/

Answer 1

I have made this example in jsfiddle

try this link

JS:

$('#container').on('click', function () {
    $('#videos').show();
});

CSS:

#right_blk {  width:auto;display:table; }
#container {
  width: 850px;
  border: 1px solid black;
  height: 580px;
}

#chatMessagesWindow {
  width: 98%;
  height: 562px;
  border: 9px solid gray;
  margin-bottom: 7px;
  overflow: auto;
  float: left;
  display:table;
}

#chatInput {
  width: 100%;
  height: 35px;
  border: 1px solid gray;
  float: right;
}


#videos {
  display: none;
  width: 30%;
  float: left;
}

#videos video { width:99.1%;
  border: 1px solid black;
}

HTML:

<div id="container">
    <div id="videos">
        <video autoplay muted id="localVideo"></video>
        <br>
        <video autoplay id="remoteVideo"></video>
    </div>

    <div id="right_blk">
    <div id="chatMessagesWindow">
     asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd 
        </div>
        <input autofocus="autofocus" placeholder="Enter a message" id="chatInput">
    </div>
</div>

Answer 2

perhaps this will help you!

html:

<div class="page-wrap">
    <div class="existed-content">
        <div class="main-content">this is a big div</div>
        <div class="main-footer">this is your footer content</div>
    </div>
</div>

css:

.page-wrap {
    clear: both;
}
.existed-content {
}
.js-added-content {
    float: left;
    width: 130px; //this can be defined by yourself!
}

js(with jQuery):

$(function() {
    var STR = "<div class='js-added-content'><div>this is left top box!</div><div>this is left bottom box!</div></div>";
    var $pageW = $('.page-wrap');
    $pageW.prepend(STR);
});

Answer 3

This sounds like a job for CSS-Tables : all of the handy layout features of HTML Tables with none of the content pollution! Or at least minimal content pollution. I did need to add a div to serve as a container for your chat messages and chat input elements:

<div id="container">
    <div id="videos">
        <video autoplay muted id="localVideo"></video>
        <br>
        <video autoplay id="remoteVideo"></video>
    </div>
    <div id="chatContainer">
        <div id="chatMessagesWindow"></div>
        <input autofocus="autofocus" placeholder="Enter a message" id="chatInput">
    </div>
</div>

Changes to your CSS basically involved adding in the new chatContainer id, getting rid of any floats, and adding in some display: lines. The box-sizing lines at the beginning are to make sure that any borders are taken into account when determining the width and height of elements. For some reason, the default is to ignore the borders and base sizes only on the interior of an element. You can get rid of those lines if you don't end up using any borders.

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#container {
    width: 850px;
    border: 1px solid black;
    height: 580px;
    display: table;
}

#chatContainer {
    border: 1px solid red;
    display: table-cell;
}

#chatMessagesWindow {
    width: 100%;
    height: 530px;
    border: 9px solid gray;
    margin-bottom: 7px;
    overflow: auto;
}
#chatInput {
    width: 100%;
    height: 35px;
    border: 1px solid gray;
}
#videos {
    border: 2px solid green;
    display: none;
}

#videos video {
    border: 1px solid black;
}

The videos div can be hidden in JavaScript with this syntax: <object>.style.display="none" and shown with <object>.style.display="table-cell" , where is of course the videos div.

The video elements themselves probably still need some positioning work though and some other elements may need sizing tweaks as well.

Answer 4

In my own scenario, first, I would create a global-wrapper that will take the 850px width .

It would contain the #videos ( by default - display:none; ) and the chat #container which would be floated left and inheriting the width of global-wrapper .

On #container 's click() :

1. set the #videos 's width 1/3rd (for instance) and float: left .
2. set the #container 's width to remaining 2/3rd and float it left .
3. call the show() method on #videos

Instead of using jQuery's css() method, use predefined CSS classes and add them dynamically.