So this is how my project currently looks like:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
<style>
body {
background-color: lightgray;
}
.feedcard {
width: 95%;
height: 150px;
border: 5px solid #7F0008;
margin: 5px;
background-color: white;
padding: 10px;
}
.feed-avatar {
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
height: 60px;
width: 60px;
display:inline;
}
.box {
display: inline-block;
vertical-align: top;
width: 60px;
height: 60px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 20px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.boxcontent {
margin: 5px;
margin-top:10px;
}
.buttons {
margin-top:10px;
}
</style>
</head>
<body>
<!-- <img class="feed-avatar" src="img_avatar.png"> -->
<div id="main-container">
<div class="feedcard">
<div class="mainbox">
<div class="box">
<img class="feed-avatar" src="img_avatar.png">
</div>
<div class="content">
<p class="title">NAME HERE</p>
<p class="sub-title" style="color:rgb(128,128,128);">Team 3</p>
</div>
<div class="boxcontent">
<div class="sale">
<text style="color:rgb(76, 175, 80);font-weight: bold;font-size: 18px;">PP Test 30%</text>
</div>
<div class="buttons">
<div class="actionbuttons" style="float:left;">
<form method="post" action="kudos.php" id="myForm">
<input type="hidden" name="hidden_id" value="<?php echo $id ?>">
<input type="hidden" name="hidden_ident" value="<?php echo $myIdent ?>">
<text style="color:rgb(128,128,128);font-size: 16px;" class="fas fa-heart"> 0</text>
</form>
</div>
<div class="actionbuttons" style="float:right;">
23 minutes ago
</div>
</div> <!-- buttons -->
</div> <!-- boxcontent -->
</div> <!-- buttons -->
</div> <!-- feedcard -->
</div> <!-- main-container -->
</body>
</html>
And this is basically what I want it to look like:
So basically, what I want is to split up the div, and where the X is in the image I want to have a small icon (on the left side there). I tried split using float left, and float right, but can't make it work. Any ideas?
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
<style>
body {
background-color: lightgray;
}
div#main-container { /* flex css */
display: flex;
}
.closeBtn { /*left side btn css */
background: lightgray;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 60px;
color: #fff;
}
.feedcard {
width: 95%;
height: 150px;
border: 5px solid #7F0008;
margin: 5px;
background-color: white;
padding: 10px;
}
.feed-avatar {
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
height: 60px;
width: 60px;
display:inline;
}
.box {
display: inline-block;
vertical-align: top;
width: 60px;
height: 60px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 20px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.boxcontent {
margin: 5px;
margin-top:10px;
}
.buttons {
margin-top:10px;
}
</style>
</head>
<body>
<!-- <img class="feed-avatar" src="img_avatar.png"> -->
<div id="main-container">
<div class="closeBtn">X</div> <!-- ADD here X btn -->
<div class="feedcard">
<div class="mainbox">
<div class="box">
<img class="feed-avatar" src="img_avatar.png">
</div>
<div class="content">
<p class="title">NAME HERE</p>
<p class="sub-title" style="color:rgb(128,128,128);">Team 3</p>
</div>
<div class="boxcontent">
<div class="sale">
<text style="color:rgb(76, 175, 80);font-weight: bold;font-size: 18px;">PP Test 30%</text>
</div>
<div class="buttons">
<div class="actionbuttons" style="float:left;">
<form method="post" action="kudos.php" id="myForm">
<input type="hidden" name="hidden_id" value="<?php echo $id ?>">
<input type="hidden" name="hidden_ident" value="<?php echo $myIdent ?>">
<text style="color:rgb(128,128,128);font-size: 16px;" class="fas fa-heart"> 0</text>
</form>
</div>
<div class="actionbuttons" style="float:right;">
23 minutes ago
</div>
</div> <!-- buttons -->
</div> <!-- boxcontent -->
</div> <!-- buttons -->
</div> <!-- feedcard -->
</div> <!-- main-container -->
</body>
</html>
Using flex you can achieve this
body {
background-color: lightgray;
}
.feedcard {
width: 95%;
height: 150px;
border: 5px solid #7F0008;
margin: 5px;
background-color: white;
padding: 10px;
}
.feed-avatar {
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
height: 60px;
width: 60px;
display:inline;
}
.box {
display: inline-block;
vertical-align: top;
width: 60px;
height: 60px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 20px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.boxcontent {
margin: 5px;
margin-top:10px;
}
.buttons {
margin-top:10px;
}
.flex{
display: flex;
align-items:center;/*play with this to align picture to box*/
}
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="flex">
<img class="feed-avatar" src="img_avatar.png">
<div class="feedcard">
<div class="mainbox">
<div class="box">
<img class="feed-avatar" src="img_avatar.png">
</div>
<div class="content">
<p class="title">NAME HERE</p>
<p class="sub-title" style="color:rgb(128,128,128);">Team 3</p>
</div>
<div class="boxcontent">
<div class="sale">
<text style="color:rgb(76, 175, 80);font-weight: bold;font-size: 18px;">PP Test 30%</text>
</div>
<div class="buttons">
<div class="actionbuttons" style="float:left;">
<form method="post" action="kudos.php" id="myForm">
<input type="hidden" name="hidden_id" value="<?php echo $id ?>">
<input type="hidden" name="hidden_ident" value="<?php echo $myIdent ?>">
<text style="color:rgb(128,128,128);font-size: 16px;" class="fas fa-heart"> 0</text>
</form>
</div>
<div class="actionbuttons" style="float:right;">
23 minutes ago
</div>
</div> <!-- buttons -->
</div> <!-- boxcontent -->
</div> <!-- buttons -->
</div> <!-- feedcard -->
</div>
</body>
</html>
Related
I have created following html form.
#import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Roboto', sans-serif;
}
body{
background: url('bg.jpg') no-repeat top center;
background-size: cover;
height: 100vh;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 550px;
/* #background: rgba(0,0,0,0.8);*/
background:rgb(233, 227, 227);
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.wrapper .title h1{
color: #c5ecfd;
text-align: center;
margin-bottom: 25px;
}
.contact-form{
display: flex;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields,
.msg{
width: 48%;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
border: 0px;
/*#border: 2px solid #c5ecfd;*/
border: 1px solid gray;
padding: 10px;
color: black;
width: 100%;
}
.msg textarea{
height: 212px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #c5ecfd;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #c5ecfd;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #c5ecfd;
}
.btn {
background: #39b7dd;
text-align: center;
padding: 15px;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
width: 100%;
}
input[type=submit] {padding:15px; background:#ccc; border:0 none;
display: block;
cursor:pointer;
background: #39b7dd;
text-align: center;
border-radius: 5px;
color: #fff;
text-transform: uppercase; }
input[type=file] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
color: black;
width: 100%;
}
input[type=radio] {
padding-top:15px;
padding-bottom:15px;
/*#display: block;*/
float:left;
position:inline;
color: black;
padding-right:15px;
}
.radioOpContainer
{
/*position:inline;*/
padding-top:15px;
padding-bottom:15px;
}
.radioOpContainer input{
/*#padding-right:15px;*/
margin-right:20px;
}
#media screen and (max-width: 600px){
.contact-form{
flex-direction: column;
}
.msg textarea{
height: 80px;
}
.input-fields,
.msg{
width: 100%;
}
}
/*
#fileuploaddiv
{
padding-top:5px;
}
*/
.label
{
padding-top:20px;
font-size: 15px;
}
.error
{
/*font-family: 'Open Sans Regular';*/
font-family: "Helvetica Neue",Roboto,Arial,sans-serif;
/*font-size: 1em;*/
font-size: 14px;
line-height: 1em;
color: #c0392b;
}
/* ---------------------- */
.table_row
{
padding-top:10px;
}
.cell_wrapper
{
background-color: white;
}
.cell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
.resultcell
{
display:inline-block;
/*float: left;
width: 50%; */
/*outline: 1px dashed black; */
/*margin-bottom: 20px;*/
word-break:break-all;
font-family: Monospace;
width: 49%;
}
#media only screen and (max-width: 600px) {
.cell, .resultcell
{
background-color: lightblue;
width: 100%;
}
}
.red{
color: red;
}
.magenta{
color: magenta;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
when messages sent status results are being added to the bottom of the page, portion from the top is disappearing from the browser( not even able to scroll to the top -I have attached an image as well) I have added the code into jsfiddle https://jsfiddle.net/lmatrix47/nux3h1cd/1/
I'm not a UI expert, Can someone point out the where the problem is
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Responsive Contact us form Using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<form th:action="#{/}" th:object="${messageForm}" method="post" enctype="multipart/form-data" id="MqMessageSenderForm">
<div class="contact-form">
<div class="input-fields">
<div class="label"><p>Queue manager Name: </p></div>
<select id="recievedQMname" class="input" th:field="*{recievedQMname}"><option selected="selected" value=""/></select>
<div class="error" th:if="${#fields.hasErrors('recievedQMname')}" th:errors="*{recievedQMname}"></div>
<div class="label"><p>Destination queue Name</p></div>
<input type="text" class="input" th:field="*{recievedQname}" id="recievedQname">
<div class="error" th:if="${#fields.hasErrors('recievedQname')}" th:errors="*{recievedQname}"></div>
<div class="label"><p> Select an input method </p></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="fileradio" checked="checked" > <label for="fileradio">File</label></div>
<div class="radioOpContainer"><input type="radio" name="msginputoption" id="messagetextradio" > <label for="messagetextradio">Message text</label></div>
</div>
<div class="msg">
<div class="label">Upload files </div>
<input type="file" th:field="*{files}" multiple accept=".txt,.xml" id="files" >
<div class="error" th:if="${fileUploadValidationResult != null}" th:text="'' + ${fileUploadValidationResult} + ''"></div>
<textarea class="input" th:field="*{msgText}" id="msgText" disabled="disabled" ></textarea>
<div class="error" th:if="${textMsgValidationResult != null}" th:text="'' + ${textMsgValidationResult} + ''"></div>
<input class="btn" type="submit">
</div>
</div>
</form>
<div class="table" th:if="${result != null}">
<div class="table_row" th:each="mapEntry : ${result}">
<div class="cell_wrapper">
<div class="cell" th:text="${mapEntry.key}" >key</div> <div class="resultcell" th:text="${mapEntry.value}">value</div>
</div>
</div>
</div>
<div class="table" th:if="${UImessageSentresult != null}">
<div class="table_row">
<div class="cell_wrapper">
<div class="resultcell" style="width: 100%;" th:text="${UImessageSentresult}" >UImessageSentresult</div>
</div>
</div>
</div>
</div>
</body>
</html>
wrapper div is given as absolute. when comparing to parent element height is less that's the reason for hiding the content you can
either change .wrapper to relative instead of absolute
or you can add scroll for wrapper.
Try the below code
.wrapper {
position: relative;
top: auto;
left: auto;
transform: initial;
}
So, I want to write a fan page for NerdHub (YouTube channel) and, I'm stuck because the "Search..." isn't in one line with the logo (of NerdHub).
Now as you can see it looks like this:
It should look like this:
I read a duplicate, but display: inline-block; didn't help me either.
All the files: https://drive.google.com/drive/folders/1Fl4MIf6otZq8w_xm17GD5NY9wbj5pM7G?usp=sharing
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
</div>
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="adbytelekom">
<p class="a">Remove Ads</p>
<img src="adbytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
<style type="text/css">
body {
background-color: black;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
#fel {
color: white;
text-decoration: none;
}
</style>
</body>
</html>
Simple way is to use flex as above answer mentioned. You can align the items inside the box with align-items property. Simply add another div around the elements you wish to have on one line and give it following style:
#wrapper {
display: flex;
align-items: center;
}
Also since you want to have logo to the left you should have it before the search bar.
<div id="wrapper">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
</div>
The simplest solution will be to add display:flex.
By default, flex renders its immediate children in a row.
I would encourage you to read more about flex properties here.
body {
background-color: black;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
#fel {
color: white;
text-decoration: none;
}
.flex{
display:flex;
}
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
</div>
</div>
<div class="flex">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
<div id="adbytelekom">
<p class="a">Remove Ads</p>
<img src="adbytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
</div>
</body>
</html>
Try this one instead of your code...
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
</div>
</div>
<div id="asd">
<form><input type="text" name="1" value="Keresés..."></form>
</div>
<div id="reklambytelekom">
<p class="a">Remove Ads</p>
<img src="reklambytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
<!--file:///D:/Don%C3%A1t/Programoz%C3%A1s/wamp/nerdhub.com/Nerdhub.html -->
<style type="text/css">
body {
background-color: black;
}
.con,#asd{float: left;}
form{width: 80%;margin: 0 auto;}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
margin: 15px 0;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
.con > * {
display: inline-block;
}
#fel {
color: white;
text-decoration: none;
}
</style>
</body>
</html>
* {
box-sizing: border-box;
position: relative;
}
body {
background-color: black;
margin: 0;
padding: 0;
}
header {
align-items: center;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
grid-gap: 140px;
overflow: hidden;
padding: 20px 60px;
width: 100%;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
section {
width: 100%;
}
aside {
padding: 30px;
position: absolute;
right: 0;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
.con>* {
display: inline-block;
}
#fel {
color: white;
text-decoration: none;
}
<div class="con">
<div id="fel"></div>
</div>
<header>
<div id="img">
<img src="https://drive.google.com/uc?export=view&id=1TR9UwuFvWO7ZAFkYjl9LQ5wNEKpvOzEM" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Keresés..."></form>
</div>
</header>
<section>
<aside>
<div id="reklambytelekom">
<p class="a">Remove Ads</p>
<img src="https://drive.google.com/uc?export=view&id=14CKiNux7_cpRXiM48Sajr7DV0H5ikjFC">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
</aside>
</section>
I am trying to center an item in the middle of the layout while also, if possible have ability to control its position if need be with minor css tweaks. In my layout page I cannot figure out why the item I want in the middle of the screen both horizontally and vertically is positioned to the left of the screen. I know the issue is something in my layout I just can't seem to find out what the issue is. Below is a basic version of my layout with the item I can trying to center.
* {
margin: 0;
padding: 0;
}
html, body {
width:100%;
height:100%;
margin:0;
}
.layoutPage {
min-height: 95%;
}
/***********************************
************Header*****************
***********************************/
.headerImage {
background: blue;
padding: 1.75em;
margin: 0;
padding: 0;
background-color: blue;
height: 3.5em; /*4em*/
}
/***********************************
***************Body****************
***********************************/
.bodyContainer {
overflow: auto;
padding-bottom: 1em;
font-family: Verdana;
font-size: 12px; /*12px*/
}
.appRoundedShadow {
display: inline-block;
height: auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="layoutPage">
<div class="headerImage">
</div>
<br />
<div class="bodyContainer">
<div class="appRoundedShadow">
<div class="container">
<div style="width: 450px; margin: 0 auto; border: 1px solid;">
<div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
<span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
</div>
<div style="margin: 1em">
<span style=""><input type="text" name="year"><br></span>
<input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
</div>
<div style="margin-left: 1em">
<p>It may take 2 or more minutes to complete your request.<br/></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<span class="footerText">Copyright © </span>
</div>
</body>
</html>
I want to center the entire appRoundedShadow div
You've got to do a couple things here. First, remove the <br> that's currently below the .headerImage div, because it's adding extra space that makes the .headerImage appear like it's not centered vertically.
Then, add the following for .appRoundedShadow:
.appRoundedShadow {
display: block;
height: auto;
margin: auto;
}
Then, make the padding consistent around .bodyContainer (replace it's padding-bottom with padding).
Finally, remove the min-height on the .layoutPage. Let the div's contents determine the height instead.
* {
margin: 0;
padding: 0;
}
html, body {
width:100%;
height:100%;
margin:0;
}
/***********************************
************Header*****************
***********************************/
.headerImage {
background: blue;
padding: 1.75em;
margin: 0;
padding: 0;
background-color: blue;
height: 3.5em; /*4em*/
}
/***********************************
***************Body****************
***********************************/
.bodyContainer {
overflow: auto;
padding: 1em;
font-family: Verdana;
font-size: 12px; /*12px*/
position: relative;
}
.appRoundedShadow {
display: block;
height: auto;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="layoutPage">
<div class="headerImage">
</div>
<div class="bodyContainer">
<div class="appRoundedShadow">
<div class="container">
<div style="width: 450px; margin: 0 auto; border: 1px solid;">
<div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
<span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
</div>
<div style="margin: 1em">
<span style=""><input type="text" name="year"><br></span>
<input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
</div>
<div style="margin-left: 1em">
<p>It may take 2 or more minutes to complete your request.<br/></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<span class="footerText">Copyright © </span>
</div>
</body>
</html>
To center your report add this style...
.bodyContainer {
text-align: center;
}
You can give the element you wish to center 'display:block' and 'margin:auto'
* {
margin: 0;
padding: 0;
}
html, body {
width:100%;
height:100%;
margin:0;
}
.layoutPage {
min-height: 95%;
}
/***********************************
************Header*****************
***********************************/
.headerImage {
background: blue;
padding: 1.75em;
margin: 0;
padding: 0;
background-color: blue;
height: 3.5em; /*4em*/
}
/***********************************
***************Body****************
***********************************/
.bodyContainer {
overflow: auto;
padding-bottom: 1em;
font-family: Verdana;
font-size: 12px; /*12px*/
}
.appRoundedShadow {
display: block;
height: auto;
margin:auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="layoutPage">
<div class="headerImage">
</div>
<br />
<div class="bodyContainer">
<div class="appRoundedShadow">
<div class="container">
<div style="width: 450px; margin: 0 auto; border: 1px solid;">
<div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
<span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
</div>
<div style="margin: 1em">
<span style=""><input type="text" name="year"><br></span>
<input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
</div>
<div style="margin-left: 1em">
<p>It may take 2 or more minutes to complete your request.<br/></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr />
<span class="footerText">Copyright © </span>
</div>
</body>
</html>
Take display: inline-block off .appRoundedShadow and you're done.
I am trying to position the "selected" hero on the right to be aligned with the gallery of heroes to the left so I can add information and a button below the selected hero later on. This page is only missing a paragraph of text that will go below both the gallery; The selected hero and a confirmation button that will go under the hero portrait on the right. Would it be easier to contain all of it in one huge section? Or am I making this too complicated?
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time{
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow:hidden;
background-color: black;
}
.navbar a{
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover{
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
#heroList{
width: 1000px;
margin: 0 50px;
margin-top: 200px;
}
.heroes{
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames{
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color:black;
}
.heroes img{
width: 175px;
height: 175px;
}
#chosenHero{
width: auto;
margin: 0 50px;
margin-top: 50px;
}
.myHero{
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
If you cannot use grid system, try following CSS modifications:
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time {
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow: hidden;
background-color: black;
}
.navbar a {
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
.navbar:after {
clear: both;
content: "";
display: block;
}
#heroList {
width: calc(100% - 200px);
float: left;
}
.heroes {
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames {
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color: black;
}
.heroes img {
width: 175px;
height: 175px;
}
#chosenHero {
width: 200px;
float: left;
}
.myHero {
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
This would be the proper way of doing it.
https://i.imgur.com/xIm2fbV.png
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>Upload Photo</p>
</div>
<div class="dashboard-profile-img-content">
<p>Prabu Perumal</p>
<p>Basic Member</p>
<p>Upgrade</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> - Update</p>
</div>
</div>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
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>Upload Photo</p>
</div>
<div class="dashboard-profile-img-content">
<p>Prabu Perumal</p>
<p>Basic Member</p>
<p>Upgrade</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> - Update</p>
</div>
</div>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
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>
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>Upload Photo</p>
</div>
<div class="dashboard-profile-img-content">
<p>Prabu Perumal</p>
<p>Basic Member</p>
<p>Upgrade</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> - Update</p>
</div>
</div>
</div>
<div class="col-sm-8">
</div>
</div>
</div>
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">Upload Photo</p>
</div>
<div class="dashboard-profile-img-content">
<p>Prabu Perumal</p>
<p>Basic Member</p>
<p>Upgrade</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> - Update</p>
</div>
</div>
</div>
<div class="col-sm-8">
</div>
</div>
</div>