CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Alukkupaiyan
Alukkupaiyan

Reputation: 95

CSS - Contents are one over the other when given float left to image

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>

Upvotes: 2

Views: 63

Answers (4)

pixlboy
pixlboy

Reputation: 1502

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.

.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;
  position: relative;
}

.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-profile-img .upload{
    position: absolute;
    top: 70px;
    font-size: 11px;
    left: 3px;
}
<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 class="upload"><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>

Upvotes: 0

Rees hunt
Rees hunt

Reputation: 13

There are many approaches to this problem try givving each division ie. div a margin in the top and in the bottom

for instance:

<div id=1></div>
<div id=2></div>
<div id=3></div>
<script type=text/css>
#1{
margin:5px 5px 5px 5px ;
}
#2{
margin:5px 5px 5px 5px ;
}
#3{
margin:5px 5px 5px 5px ;
}
</script>

Upvotes: 1

JideLambo
JideLambo

Reputation: 91

in .dashboard-response class, remove the clear: float and introduce the CSS flexbox. Also, have the flex-direction of this class as 'column'

    .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 {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}
<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" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAFbklEQVR4Xu2dzYsbdRjHvzNhTDeb7ctitAhFKYJSLYroioIH8eILlorF3hQ9eKmgB3vpUQ966D8gCl56K1WpbRV1QdGWFqr20mqVSiuspVZajSaZTSYZmSWBYmcmk3k2mSeP373uPMP3+XzyzEt+k8T5+735EPwzS8ChYLNuVxqjYNt+Kdi4XwqmYOsEjPfHczAFGydgvD1OMAUbJ2C8PU4wBRsnYLw9TjAFGydgvD1OMAUbJ2C8PU4wBRsnYLw9TjAFGydgvD1OMAUbJ2C8PU4wBRsnYLw9TjAFGydgvD1OMAUbJ2C8PU4wBRsnYLw9TjAFGydgvD1OMAUbJ2C8PU4wBRsnYLy9sU9w+cE3Ubp5AWGvK0fZawNBC6F/BaH/B7pXTiO4cATo/JN739rz5W6sXzh2wZVnvoI7f7c0Z2p96F9Gd+lL+EdfH1m29nxScOMXvO1zuLX7pDmz1YfBykT7iy9m2x5ARXm+zI0kbGhLcL/J6PDdOrwNvT/PDuUzUcE58g1tYMgGJgVHPUeSmx8+irD5WyqCIgSPko+CUwh0L51A69CTKgVHobLkm1rBYWMJrcWX4M5tGtpD2K7D8aqAV4U7U4O7djOctZtRqt0LlGZS6kMsH9uNzg/vJ26TNMFa8g2Fo/UQHdbPobF/QZbfq6LyxAG4tfsT9xPWf0Fj/wOjC1aSTwZoAt90lzghqwGw3/3MUx+jtPHheBZhD61PtqN78Wjs/7Xno+CIgFfF7I4TcCobY3l0zu7D8jevFiZYko+C+wTKC2/A27orlkd0u9Q8ED/hk5jgKFTefBTcJ+CsuRGzz50EvLnrmKSd7yclOG8+Ch4Q8Kqo7jwFlDeoFBwdpvPko+DBBFduwezO7wDXUynYyZmPgq+Z4OgQ7aypqRS8cqGVIx8FDyZ47lbM7jgOuDeoFOzkzEfBg6voh96Ct+XlWB7BhcPwv3i+uNuk6Co6Zz4Kjn6XIOUKGgjR/vZttE/tLUywJB8FR2u6zx6Du/6OeBZBA41oVal+rjDBknz/a8He1ldQvue12FujAZjg/CH4iy8kchrnffBq5JtewY0lNA8+DnfDnZl6cMrr4FY3wZm7DaX5u+Cuux0or0+v7bbQ/Oix1IX/tNUkDfkywUnZyOyCf9Rz5/Q7WD6+J5VRUQv+WfNRcAKB7sWv0TqyfSifogRnzTe0gSEbmJzg4PzBzA/eFSF4lHwUfA2B6Dms9vd70TnzbmYukxScJ1/mRhI2nP4JbtfR++tnBL9+lnivmwZp7IKF+aZXcNdH9/eTsYsDcU05bglh4ANBE73mJfSu/ojOT/tGftD9v/tOFKwk39QKTluElzY1Sn2SYC35RukldjDG/fOy43wjQdp8VK89n7THws7Bq/JUpbR7CpYT1D4h2vNJDXCCEz58puUIQ8FCApxg4wApmIKFBIot5zmY52DZK1D7IVB7Phl9Ix8+k0CgYAm9KXgjgYIpWEig2HJeZPEiS/YK1H4I1J5PRp8XWVxNkr6CKk9/Cvem678jo3f1DJofPCLdvbheez5pg2M/B0sDsl5GgIJl/NRXU7B6RbKAFCzjp76agtUrkgWkYBk/9dUUrF6RLCAFy/ipr6Zg9YpkASlYxk99NQWrVyQLSMEyfuqrKVi9IllACpbxU19NweoVyQJSsIyf+moKVq9IFpCCZfzUV1OwekWygBQs46e+moLVK5IFpGAZP/XVFKxekSwgBcv4qa+mYPWKZAEpWMZPfTUFq1ckC0jBMn7qqylYvSJZQAqW8VNfTcHqFckCUrCMn/pqClavSBaQgmX81FdTsHpFsoAULOOnvpqC1SuSBaRgGT/11RSsXpEsIAXL+Kmv/hclj3u10kc1HgAAAABJRU5ErkJggg==" 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>

Upvotes: 0

Lars
Lars

Reputation: 3628

remove the height from .dashboard-profile-img Then remove the width on the <img> element

.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 {
  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">
          <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>

Upvotes: 1

Related Questions