CSS position float - html

Question

I try to display a left and right area but it's not working actually with the cotes "right" and "left"
I tried the position :absolute but it's display me something strange
Maybe I'm doing something wrong with my conteneur div or my div element1
Someone knows how I can achieve that?
#conteneur {
padding-top: -25px;
display: flex;
border: 2px solid black;
padding-bottom: 10px;
}
#element1 {
display: block;
width: 350px;
border: 1px solid black;
}
.right {
float: left;
width: 100%;
}
.left {
float: right;
width: 100%;
}
<div id="conteneur">
<div id="element1">
<img src="{{ public_path('../public/uploads/logo-FFRXIII-2017-01.png')}}" style="max-width: 300px;">
<div id="right">
adresse_right
</div>
<div id="left">
adresse_left
</div>
</div>
</div>

Answer 1

you are using flexbox, so stick with flexbox and forget floats
#conteneur {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
border: 1px solid black;
padding-bottom: 10px;
}
.img {
flex: 0 100%;
}
img {
max-width: 300px;
}
<div id="conteneur">
<div class="img">
<img src="http://placehold.it/300x200">
</div>
<div class="right">
adresse_right
</div>
<div class="left">
adresse_left
</div>
</div>

Answer 2

First of all your
<div id="right">
adresse_right
</div>
<div id="left">
adresse_left
</div>
Won't react to your CSS since these are ID's and in your CSS you are trying to find classes with the . selector. So change the . to a # or change your ID tags to Classes.
Secondly i've created a jsfiddle and edited your code hope this helps!