How to inline two image Divs inside a Div? - html

Question

I am struggling to place both divs inline by each other, any suggestions people? Everything I am trying within CSS is not working like Float(img-1): Left and Float (img-2): Right, display: inline-block etc.
<div class="multimedia-img">
<div class="img-1">
<a href="https://www.youtube.com/">
<img src="images/youtube.png" style="width: 200px; height: 140px;">
</a>
</div>
<div class="img-2">
<a href="https://www.ted.com/talks">
<img src="images/ted.png" style="width: 200px; height: 160px;">
</a>
</div>
</div>
EDIT:
Added my CSS below to show you what I have done so far...
body{
margin: 0;
padding: 0;
text-align: center;
background-color: #505050;
height: auto;
min-height: 100%;
}
.container{
width: 1000px;
margin: 0 auto;
background-color: white;
display: block;
overflow: auto;
}
.content{
width: 100%;
margin: auto;
padding-bottom: 5px;
color: #1B0C0C;
height: 114px;
text-align: center;
padding-top: 40px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
white-space: pre-line;
}
.hobbies{
margin: auto;
width: 100%;
}
.img-hobby {
width: 50%;
height:100%;
float: left;
margin-top: 47px;
margin-right: -295px;
}
.text-hobby {
height: 100%;
margin-top: 8%;
margin-left: 20%;
}
.friends{
margin: auto;
width: 100%;
}
.img-friends{
width: 50%;
height:100%;
float: left;
}
.text-friends{
height: 100%;
margin-top: 8%;
margin-left: 20%;
}
.multimedia-img{
display: inline-block;
}
.img-1{
width: 50%;
float: left;
}
.img-2{
width: 50%;
float: right;
}
img{
padding-top: 17px;
border-radius: 125px;
}
p{
font-weight: bold;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
top: 0;
width: 100%;
overflow: hidden;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #61C8ED;
}
li a:hover:not(.header) {
background-color: #000000;
}
.header{
background-color: #61C8ED;
}

Answer 1

try adding display: inline-block
.multimedia-img{
....
display: inline-block;
....
}

Answer 2

Float
You float both divs and clear the parent element, e.g. with overflow:hidden;
.multimedia-img {
overflow: hidden;
}
.img-1, .img-2 {
float: left;
}
Flexbox
Set the parent to display: flex;
.multimedia-img {
display: flex;
}

Answer 3

here i think you want to do this
https://jsfiddle.net/yec8p3vt/
html
<div class="multimedia-img">
<div class="img">
<a href="https://www.youtube.com/">
<img src="images/youtube.png" style="width: 200px; height: 140px;">
</a>
</div>
<div class="img">
<a href="https://www.ted.com/talks">
<img src="images/ted.png" style="width: 200px; height: 160px;">
</a>
</div>
</div>
CSS
.img {
display: inline-block;
}

Answer 4

You can do both:
.multimedia-img {
display: inline;
}
.img-1,
.img-2 {
display: inherit;
}
Or:
.img-1,
.img-2 {
display: inline;
}

Answer 5

i would recommend Flexbox. So easy :)
http://caniuse.com/#feat=flexbox