Here’s a nice creation by Janko that mimics a Youtube-like adaptable change view feature. This lets you switch between normal mode and wide mode making it expand or shrink the movie area. Although it changes view, all the information still remains accessible.

In simulating the structure, five sections are defined – content, comments, sidebar and footer. Here is the structure.

<div id="header"></div>

<div id="main">

<div id="content"></div>

<div id="sidebar"></div>

<div id="comments"></div>

</div>

<div id="footer"></div>

For the content and comment areas to float to the left and sidebar floating to the right, here is its CSS.

#header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
#header { width:900px; margin:0px auto;}
#main {width:960px; margin:0px auto; overflow:hidden;}
#content { width:540px; float:left;}
#comments { width:540px; float:left;}
#sidebar { width:280px; margin-left:20px; float:right;}
#footer { width:900px; margin:0px auto;}

For the content, it will be 600px wide paddings included and when the user changes to wide view, it will stretch to 960px. Below is the code to create textual link.

<a id="wideView" href="#">Change View</a>

Interaction. Below is the jQuery that will toggle the CSS class ‘wide’.

$(document).ready(function() {
    $("#wideView").click(function() {
        $("#content").toggleClass("wide");
    });
});

Setting ‘wide’ CSS class to 900px (with paddings, it will be 960px total)

#content.wide { width:900px;}  

You can check out the full info by clicking on the image.

See the live DEMO here.

Incoming search terms for the article:

• sidebar list youtube like design css
• using css float like youtube video layout
• youtube like footer css
• toggle youtube css
• youtube 900px wide
• youtube Adatable
• youtube css design
• youtube jquery css
• youtube like comment box css
• youtube like comment css