how to fix the interface of this (simple html/css) - html

Question

here is my interface
I have two blocks div.small (include 4 small articles) and article.big. I want the big block to be to the right of the small block, but it's underneath.
*{
font-family: tahoma;
}
div.all{
height: 528px;
width: 824px;
}
article.small{
width: 312px;
height: 82px;
}
div.small{
float: left;
}
img.smallimg{
float: left;
width: 121px;
height: 82px;
}
article.big{
width: 496px;
height: 525px;
}
img.bigimg{
width: 494px;
height: 329px;
}
<div class="all">
<div class="small">
<article class="small">
<img src="small01.jpg" alt="" class = "smallimg">
Link 01
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link 02
</article>
<article class="small">
<img src="small03.jpg" alt="" class="smallimg">
link03
</article>
<article class="small">
<img src="small04.jpg" alt="" class="smallimg">
link04
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link05
</article>
</div>
<article class="big">
<img src="big.jpg" alt="" class="bigimg">
big link
</article>
</div>
I've tried to limit div.all with height = 528px, however, the article.big should've to be to the right, but it's not. My question is: Why's my way wrong?

Answer 1

Notice removal of floats (redundant) and addition of display: flex which displays in child elements as a row by default. The reason your big div is underneath is because the elements being used div are block level elements by default. If they were inline-block they would also align side by side. Cheers!
*{
font-family: tahoma;
}
div.all{
height: 528px;
width: 824px;
display: flex;
}
article.small{
width: 312px;
height: 82px;
}
img.smallimg{
width: 121px;
height: 82px;
}
article.big{
width: 496px;
height: 525px;
}
img.bigimg{
width: 494px;
height: 329px;
}
<div class="all">
<div class="small">
<article class="small">
<img src="small01.jpg" alt="" class = "smallimg">
Link 01
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link 02
</article>
<article class="small">
<img src="small03.jpg" alt="" class="smallimg">
link03
</article>
<article class="small">
<img src="small04.jpg" alt="" class="smallimg">
link04
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link05
</article>
</div>
<article class="big">
<img src="big.jpg" alt="" class="bigimg">
big link
</article>
</div>

Answer 2

Is this what you want? No complicated display: flex; needed
*{
font-family: tahoma;
}
div.all{
height: 528px;
width: 824px;
}
article.small{
width: 312px;
height: 82px;
}
div.small{
float: left;
}
img.smallimg{
float: left;
width: 121px;
height: 82px;
}
article.big{
width: 496px;
height: 525px;
position: absolute;
top:0;
right:0;
}
img.bigimg{
width: 494px;
height: 329px;
}
<div class="all">
<div class="small">
<article class="small">
<img src="small01.jpg" alt="" class = "smallimg">
Link 01
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link 02
</article>
<article class="small">
<img src="small03.jpg" alt="" class="smallimg">
link03
</article>
<article class="small">
<img src="small04.jpg" alt="" class="smallimg">
link04
</article>
<article class="small">
<img src="small02.jpg" alt="" class="smallimg">
link05
</article>
</div>
<article class="big">
<img src="big.jpg" alt="" class="bigimg">
big link
</article>
</div>