Question posted in 
Hi I’ve designed the user profile page. Here, in my page the “upload photo” text & the “My Response Rate” text are in one over the other. I tried clear the float & i tried some other method but i couldn’t fix the issue. still the issue is there. Please help me to fix this. Thanks in advance.
.dashboard-profile-wrp {
margin: 25px 0px;
border: 1px solid #b8c0c5;
padding: 1.429rem;
border-radius: 1px;
}
.dashboard-profile-wrp h3 {
margin-top: 0px;
margin-bottom: 25px;
border-bottom: 1px solid #b8c0c5;
}
.dashboard-profile-img {
height: 7.143rem;
width: 7.143rem;
float: left;
}
.dashboard-profile-img-content {
margin: auto;
margin-left: 1.429rem;
display: inline-block;
}
.dashboard-profile-img img {
max-height: 100%;
max-width: 100%;
border-radius: 50%;
}
.dashboard-response {
clear: both;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.paperindex.com/js/avatars.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="dashboard-profile-wrp">
<h3>Your Profile</h3>
<div class="dashboard-profile-img">
<img avatar="Prabu Perumal" width="120" height="120">
<p><a href="#" class="link">Upload Photo</a></p>
</div>
<div class="dashboard-profile-img-content">
<p>Prabu Perumal</p>
<p>Basic Member</p>
<p><a href="#" class="link">Upgrade</a></p>
</div>
<div class="dashboard-response">
<p>My Response Rate</p>
<p>40%</p>
<p>My Avg. response Time</p>
<p>2 hours%</p>
<p><b>Contact Info</b> - <a href="#" class="link">Update</a></p>
</div>
</div>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
4
Answers
remove the
heightfrom.dashboard-profile-imgThen remove the width on the
<img>elementin .dashboard-response class, remove the clear: float and introduce the CSS flexbox. Also, have the flex-direction of this class as ‘column’
There are many approaches to this problem
try givving each division ie. div a margin in the top and in the bottom
for instance:
Make the font size of “Upload Photo” content smaller and make it positioned absolute.
Not the solution that is necessary as it changes the design a bit. The “upload Photo” link looks closer to photo and gives a better sense.
You can also make it appear just on hover of image.