How do I get my divs positioned as I want, CSS - html

Question

I am working on my portfolio for school (I am a developer on Mediacollege Amsterdam) and I need help with my css. I have searched for answers, but I cannot get my page as desired. I have 3 divs, i want 2 of them to be next to each other and the third one below the first one, how would I do that?
I want the picture where it's at and I want the block that starts with "my tasks" where it is, but I want the block that starts with "About the game" positioned directly underneath the image
This is how I have the divs sorted, the div gameplay is the video, the div info is the "my tasks" block and the about div is the "about the game" block.
<div class="item">
<div class="legend">Fear The Blue</div>
<div class="content">
<div class="gameplay">
<video autoplay loop muted>
<source src="resources/video/portfolioVideos/FTB.webm" type="video/webm" />
<source src="resources/video/portfolioVideos/FTB.mp4" type="video/mp4" />
Video not available :(
</video>
</div>
<div class="info">
<span class="tit">My tasks:</span>
<ul>
<li>Puzzle logic</li>
<li>First puzzle</li>
<li>Second puzzle</li>
<li>Audio Manager</li>
<li>Controller support</li>
<li>Inventory</li>
<li>Outline Shader</li>
<li>Movement</li>
<li>Start menu</li>
<li>VR support</li>
<li>Keypad logic</li>
<li>Performance improvements</li>
<li>Door/teleport logic</li>
</ul>
<span class="tit">Engine:</span> Unity3D
<br />
<span class="tit">Language:</span> C#
<br />
<span class="tit">team:</span>
<ul>
<li>2 programmers</li>
<li>3 artists</li>
<li>2 mediamanagers</li>
</ul>
</div>
<div class="about">
<span class="tit">About the game:</span>
<ul>
<li>Single player puzzle game</li>
<li>Oculus support</li>
<li>Best played with controller</li>
</ul>
I've chosen to put this game on my portfolio, because this is my first oculus game. I am also proud of my audiomanager class, inventory class and the endproduct.
</div>
</div>
<div class="foot">
<img class="git" src="resources/images/resources/GithubIcon.png" />
<!--<img class="trailer" src="Images/resources/filmklapper.png"/>-->
<a><img class="game" src="resources/images/resources/controller.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac.zip" web="SchoolFiles/IDP/FearTheBlue/web-build/FearTheBlue.html" /></a>
<a><img class="game" src="resources/images/resources/oculus.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win_Oculus.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac_Oculus.zip" /></a>
</div>
</div>
My full css:
.item
{
font-family: normalFont, sans-serif;
margin: 0.9em auto 0.5em auto;
background-color: #222222;
border-radius: 1em;
display: block;
color: white;
width: 95%;
}
.item .legend
{
font-family: headerFont, sans-serif;
border-top-right-radius: .5em;
border-top-left-radius: .5em;
padding: 0.2em 0 0.2em 0.4em;
background-color: #4CAF50;
font-size: 1.2em;
}
.item .content{padding: .5em;}
.item .gameplay
{
max-width: 100%;
display: block;
margin: 0 auto;
}
.item .gameplay video{width: 100%;}
.item .gameplay img{width: 100%;}
.item .info
{
text-align: left;
display: block;
height: auto;
}
.item .info :visited,
.item .info a:link
{
text-decoration: none;
color: darkorange;
}
.item .info a:hover
{
text-decoration: underline;
color: lightblue;
}
.tit{color: #4CAF50;}
.item ul
{
padding: 0 0 0 1em;
margin: 0;
}
.item li{list-style-type: "- ";}
.item .foot
{
border-radius: 0;
border-bottom-right-radius: .5em;
border-bottom-left-radius: .5em;
background-color: #4CAF50;
width: 100%;
height: 2em;
}
.item .foot a
{
margin: 0.05em 0 0 0.6em;
display: inline-block;
width: 30px;
float: left;
}
.item .foot img
{
cursor: pointer;
width: 100%;
}
.item .foot .game, .item .foot .git{margin-top: 1px;}
#popup .message
{
text-align: center;
margin: 1em;
}
#popup
{
width:11em;
border-radius: .5em;
outline:none;
height:7em;
background-size: 100% 100%;
background-color: #333;
z-index:2;
position:absolute;
margin:0 0 0 -4.56em;
}
.input-group
{
width: 85% !important;
margin: .5em auto !important;
}
.input-field
{
background-color: #222 !important;
border: 1px solid #111 !important;
}
.input-field:hover
{
background-color: #111 !important;
}
.icon-background
{
border: 1px solid #111 !important;
}
#media screen and (min-width:600px){.item{width: 80%;}}
#media screen and (min-width:1000px)
{
.item{width: 60%;}
.item .legend{font-size: 2em;}
.item .gameplay
{
display: inline-block;
margin-top: .3em;
width: 25em;
float: left;
}
.item .about
{
width: 20em;
}
.item .info
{
display: inline-block;
margin: 0 0 0 1em;
max-width: 40%;
}
}
regards,
Dani

Answer 1

Try removing the property
float:left for the image div
Or you can put the two divs that want to be one below the other in one big div and the div you want at right outside in a different div.

Answer 2

From the information you provided, I think you're trying to make a 2 column layout. If you're floating all of your div containers to the left, since you added your "about" div last in your html and because your 2 first div's take up the full width of the container, your third div will be positioned below the div with the greatest height. If you want to avoid this You should use 2 divs (one for each column). Float them both left and add your content inside your respective columns.
.container {
position: relative;
width:100%;
}
.col1{
position: relative;
float:left;
width:60%;
}
.col2 {
position: relative;
float: left;
width: 40%;
}
img {
max-width:100%;
}
<div class="container">
<div class="col1">
<div class="image">
<img src="http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans_NvBQzQNjv4BqqVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg" />
</div>
<div class="about">
bla bla bla
</div>
</div>
<div class="col2">Cras quis venenatis est, in pretium eros. Duis a rutrum sem, ac ultricies nunc. Nulla non placerat turpis, a elementum lorem. Duis porttitor, tortor eu congue feugiat, arcu dolor pellentesque ante, sit amet ullamcorper mauris elit quis dui. Suspendisse sem lacus, viverra eget nunc id, ornare volutpat eros. Aliquam erat volutpat. Maecenas eu efficitur neque. Curabitur tortor ex, dictum tempor neque vitae, semper suscipit arcu. In at velit non velit molestie fringilla nec a nunc. Integer et tincidunt risus. Integer finibus, arcu eu hendrerit tincidunt, ante urna vestibulum ante, sit amet accumsan turpis purus id arcu. Curabitur non aliquet sapien, malesuada imperdiet orci. Sed posuere lectus ac nulla viverra, consequat semper lorem commodo. In fermentum nisl lacus, non congue velit sagittis sit amet. Phasellus mollis diam mi, id mollis lectus imperdiet ut. Mauris egestas neque urna, vehicula cursus nisi auctor vitae.
Aliquam ornare vitae urna auctor pretium. Ut vestibulum suscipit volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras viverra lorem non ex maximus, tempus gravida justo tempus. Pellentesque fermentum volutpat tortor ut pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur mattis tortor. Fusce et lectus pulvinar, sollicitudin leo interdum, molestie risus. Nullam non consectetur arcu. Phasellus congue, eros vel euismod pulvinar, erat ex viverra velit, vitae bibendum arcu odio in dolor. Maecenas efficitur massa faucibus pretium accumsan. Duis id suscipit neque.
Nulla pulvinar tempus dui, vitae pellentesque orci dapibus id. Nullam hendrerit egestas dui. Nullam tempus mattis dui. Proin in rutrum purus. Vivamus tempor justo mauris, non bibendum dui luctus ac. Nunc vulputate libero velit, sed auctor nulla mattis ut. Nullam finibus mollis ante eget rhoncus. Suspendisse at purus ante. Vivamus tristique felis eu quam pulvinar, nec viverra quam porta. Phasellus gravida enim non sem facilisis maximus. In varius ac lacus nec convallis. Quisque molestie commodo mi in fermentum.
</div>
</div>
This is very basic CSS and I'm sure if you google enough you will find other grid methods (as mentioned above) that will make your layouts a whole lot easier. Hope this helps.