CSS alignment on my webpage between two elements - html

Question

I have two elements on my page which I wish to align side by side, what would be the best way of going about this, and can somebody explain the best way to go about coding it when you want to align elements together.
In this example I want the video to take up most of the room say 3/4 and the chart to be in the remaining 1/4. (Bootstrap is loaded on this page)
Any suggestions?
This is what it currently looks like:
http://i1057.photobucket.com/albums/t390/Alexwileyy/element_zps066ecdd2.png
(I have outlined the video in a color so I can see the perimeters)
This is my HTML code for the two elements:
<!--Video Section-->
<div class="video">
<div class="container">
<div class="video-element">
<iframe width="460" height="215" src="//www.youtube.com/embed/PdABTJhRTLY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!--End Of Video Section-->
<!--Start of chart-->
<div class="container">
<div class="chart">
<div class="chart-cont">
<h1 id="chart-header">Charts</h1>
</div>
<div class="chart-cont">
<h1>1</h1>
<img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
View Review</td>
</div>
<div class="chart-cont">
<h1>2</h1>
<img src="http://savegameonline.com/wp-content/uploads/2013/05/CoD-Ghosts-banner.png">
View Review</td>
</div>
<div class="chart-cont">
<h1>3</h1>
<img src="http://bit.ly/1tSu4iq">
View Review</td>
</div>
<div class="chart-cont">
<h1>4</h1>
<img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
View Review</td>
</div>
<div class="chart-cont">
<h4>View More..</h4>
</div>
</div>
</div>
<!--End of chart-->
This is my CSS code for my two elements:
.chart {
background-color:white;
width:400px;
margin-bottom:10px;
margin-top:-35px;
}
.chart-cont * {
display:inline;
}
.chart-cont {
padding:10px;
box-shadow: 0 2px 5px rgba(26,26,26,0.75);
text-align:center;
}
.chart-cont img {
width:180;
height:60px;
}
.chart-cont h1 {
vertical-align:middle;
}
Any answers greatly appreciated.

Answer 1

First if you want to work with 3/4 of the screen, start using a percentage as width.
First create a content Div, then a LeftContent and a RightContent div.
Like this:
<div class="Content">
<div class="LeftContent">
</div>
<div class="RightContent">
</div>
</div>
CSS:
.Content{
width:100%;
margin:10px;
padding:10px;
}
.LeftContent{
width:60%;
margin:10px;
float:left;
}
.RightContent{
width:30%;
margin:10px;
float:right;
}
Now you can place the video left, and the other images right, adjust how you want to with padding, margin and width percentage, test with making your window smaller (how it looks like on smaller screens).
Notice to make use of float left and float right.
Here is JSFiddle link: http://fiddle.jshell.net/7pp7q/1/