CSS texte and image alignement in % - html

Question

I'm a real beginner in CSS...
Do you know how could I do this sort of alignment ? I try a lot a things but I don't get what I need... So I just draw it if you have any code idea...
<div id="sys-wrap">
<img src="image.png">
<p>Long message texte</p>
</div>
#sys-wrap {}
#sys-wrap p {
border: 1px solid #ffffff;
float:left;
margin: 15px;
width: 691px;
}
#sys-wrap img {
border: 1px solid #ffffff;
float: left;
margin: 15px 15px 15px 100px;
vertical-align: top;
}
Thanks!
(source: imgsafe.org)

Answer 1

I made a fiddle. Does this work for you?
https://jsfiddle.net/hnf8jou4/3/
HTML:
<div>
<div id="left">
<img src="http://lorempixel.com/400/200" id="inner">
</div>
<div id="right"></div>
</div>
CSS:
#left {
width:25%;
height:200px;
float: left;
background-color:#f00;
}
#right {
width:75%;
height:200px;
background-color:#0f0;
}
#inner {
display:block;
width:100px;
margin-left: auto;
margin-right: 0;
background-color: #00f;
}

Answer 2

It is really unclear what exactly you are trying to achieve. But since i saw the drawing u made i suppose this is what u need. U need to have a div for wrap and add float: right to the right div. The other things are just playing with height in % and paddings.
https://jsfiddle.net/hnf8jou4/4/

Answer 3

For #sys-wrap img inside of your CSS file, add a float: right; and a margin of 15px
Your new CSS should look similar to this:
#sys-wrap img {
width: 50px;
height: 50px;
border: 1px solid #ffffff;
float: right;
margin: 15px;
}
Also, give it's parent container a set width and height:
#sys-wrap {
width: 150px;
height: 150px;
background: red; // just to make it pretty
}
And just as a little fyi, vertical-align does not work, unless the specified element has a display of table-cell. :-)
Here's a fiddle: https://jsfiddle.net/d2ae3ub3/