CSS elements positioning (1 big element and 5 small) - css

Question

Can somebody help me to understand how to make 6 elements look like on the picture (videos part)?
Here's what I have so far:
.videos {
width: 730px;
height: 400px;
float: left;
margin: 15px 5px 15px 0px;
}
.videos > div {
display: inline-block;
}
#big {
height: 200px;
width: 400px;
background-color: #fff0e0;
}
#small {
height: 90px;
width: 200px;
background-color: #fff0e0;
}
<div class="videos">
<header>
<h2>Videos</h2>
</header>
Browse all videos
<br>
<div id="big">Big video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
<div id="small">Small video</div>
</div>

Answer 1

Part of your problem is that widths and heights do not include the sizes of the margins. So if you have, say, a 6 pixel margin between everything, and the bigger rectangle is 200px high, the smaller rectangles need to be 97px high to make everything line up.
Then there's the problem of spaces: with inline-blocks, newlines in the source take up a space horizontally, which throw things out of alignment. I changed the inline-blocks to floats.
And you can't have duplicate ids in a HTML document. I needed to change the ids to classes.
(This doesn't really matter for CSS, but it would be a big problem in other cases, so it's best to play it safe and not have errors.)
You also missed a / in the source; the second <h2> should have been </h2>.
That's about it.
.videos {
width: 630px;
height:400px;
margin: 15px 5px 15px 0px;
}
.videos > div {
float: left;
margin: 0 6px 6px 0;
background-color: #fff0e0;
}
.big {
height: 200px;
width: 400px;
}
.small {
height: 97px;
width: 197px;
}
<div class="videos">
<header>
<h2>Videos</h2>
</header>
Browse all videos
<br>
<div class="big">Big video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
<div class="small">Small video</div>
</div>

Answer 2

Simple Example:
HTML
<div id="left-wrapper-lg">
<div class="big-col">
</div>
<div class="small-col">
</div>
<div class="small-col no-margin">
</div>
</div>
<div id="left-wrapper-sm">
<div class="full-col">
</div>
<div class="full-col">
</div>
<div class="full-col">
</div>
</div>
CSS
#left-wrapper-lg {
float:left;
width:64%;
margin-right:2%;
}
#left-wrapper-sm {
float:left;
width:34%;
margin-right:0;
}
.no-margin { margin:0 !important;}
.big-col {
float:left;
width:100%;
margin-right:0%;
}
.small-col {
float:left;
width:48%;
margin-right:2;
}
.full-col {
float:left;
width:100%;
margin:0;
}

Answer 3

Change your css , jsFiddle
.videos {
width: 730px;
height: 400px;
float: left;
margin: 15px 5px 15px 0px;
}
.videos > div {
display: inline-block;
}
#big {
height: 200px;
width: 400px;
background-color: #fff0e0;
float:left;
margin-right:10px;
margin-bottom:10px;
}
#small {
height: 90px;
width: 195px;
background-color: #fff0e0;
margin-bottom:15px;
margin-right:10px;
float:left;
}