Having trouble with <wbr> and image scaling - html

Question

I'm trying to make a page with text floated left and the image floated right. I accomplished that, but my webpage images and text need to be able to properly resize. and width in css aren't working for me, unlike in my home page, so I was wondering if anyone could fix it.
<section>
<div id="right">
<img src="../img/placeholder.png" alt="Photo of --">
<p>--</p>
</div>
<p id="left">Web and Graphic Designer beginner,<wbr>blah blah.</p>
</section>
and the css (I included all of it just in case, but the most relevant part is the bottom PAGE PORTFOLIO):
/*ABOUT CSS*/
/*GENERAL*/
body {
}
ul {
list-style: none;
}
/*section*/
section {
max-width: 940px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
margin: 0 auto;
padding: 0;
color: gray;
}
/*all styling*/
* {
background-color: #f2f2f2;
}
/*all links*/
a {
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
color: gray;
}
/*visited links and hover links*/
a:visited {
color: #838383;
}
a:hover {
font-size:105%;
}
/*HEADING*/
/*header*/
h1 {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
line-height: 0.5em;
color: #8c8c8c;
width: 100%;
}
/*subhead*/
h2 {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
color: #8c8c8c;
width: 100%;
}
/*NAVIGATION*/
nav {
text-align: center;
padding: 10px 0;
}
/*horizontal nav*/
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 2% 2%;
}
/*FOOTER*/
footer {
font-size:0.75em;
text-align: center;
clear: both;
}
/*social media*/
footer {
text-align: center;
margin: 0 5px;
padding: 15px 15px;
}
#twitter img {
width: 46px;
height: 37px;
margin: 0 auto;
padding: 15px 15px;
}
#facebook img {
width: 40px;
height: 40px;
margin: 0 auto;
padding: 15px 15px;
}
/*PAGE PORTFOLIO*/
#right {
float: right;
width: 40%;
height: 40%;
}
#left {
float: left;
}

Answer 1

What's wrong here
Used your code except for:
p+img {
width:50px;
height:50px;
text-wrap:true;
float:left;
}
which is for extra text