How can I make the div auto adjusting it's height, but keeping the image in the icon to be centrally aligned
Question
I was making an application in which there were several divisions. In one particular division the content is going more than one line. As we know it will make the div scrollable to let us see the content .
But in this case I want that the div adjust its height in accordance with the content so that all the content can be seen in one go and no scroll should be there.....also the image near it should align itself in the center of the div. is there any way ??
HTML:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Screen1</title>
<link rel="stylesheet" type="text/css" href="Screen1.css">
</head>
<body BGCOLOR="#e9ecf1" ng-controller='screen1Controller'>
<div class="main">
<div id="header1Main">
<div id="header1">Timeliness</div>
<div id="header2">
</div>
</div>
<div class="clear"></div>
<div class="opporMain">
<div class="opporHeader">
<div class="circleIcon">I</div>
<div class="opporHeading">Heading is the main thing that we need now it is a very important propert and wee need it we will have the thing according to the needs .........</div>
</div>
<div class="lineDiv"></div>
<div class="opporContent">
<div class="contentStatus">one three</div>
<div class="contentStatusDate">main thing</div>
<div class="clearContent"></div>
<div class="contentMainContent">"Things have been changed according to the needs"</div>
<div class="contentUpdateTime"><img src="images/timeline-3.png" alt="clock"> Just Now</div>
<div class="clearContent"></div>
<div class="contentUpdateBy">updated by <font color="black">ziong zhu</font></div>
</div>
<div class="lineDiv"></div>
<div class="opporComment">
<img class="commentIcon" src="comment.png" alt="img"/>
<div class="opporCommentContent">Comments</div>
<div class="opporCommentDetails">3 Comments</div>
</div>
</div>
<div class="clearOppr"></div>
</div>
</div>
<script type="text/javascript" src="js/angular-1.0.1.js"></script>
<script src="js/application.js"></script>
<script src="js/Controller.js"></script>
</body>
</html>
CSS:
/*ROBOTO SLAB*/
@font-face {
font-family: 'RobotoSlab-bold';
src:url('fonts/RobotoSlab-Bold.woff') format('woff');
}
@font-face {
font-family: 'RobotoSlab-light';
src:url('fonts/RobotoSlab-Light.woff') format('woff');
}
@font-face {
font-family: 'RobotoSlab-regular';
src:url('fonts/RobotoSlab-Regular.woff') format('woff');
}
@font-face {
font-family: 'RobotoSlab-thin';
src:url('fonts/RobotoSlab-Thin.woff') format('woff');
}
/*ROBOTO*/
@font-face {
font-family: 'Roboto-regular';
src:url('fonts/Roboto-Regular-webfont.woff') format('woff');
}
@font-face {
font-family: 'Roboto-bold';
src:url('fonts/Roboto-Bold-webfont.woff') format('woff');
}
@font-face {
font-family: 'Roboto-thin';
src:url('fonts/Roboto-Thin-webfont.woff') format('woff');
}
@font-face {
font-family: 'Roboto-light';
src:url('fonts/Roboto-Light-webfont.woff') format('woff');
}
@font-face {
font-family: 'Roboto-medium';
src:url('fonts/Roboto-Medium-webfont.woff') format('woff');
}
body
{
margin:0px;
}
#header1Main
{
background-color:#ffffff;
overflow:auto;
}
#header1 {
display:inline-block;
font-family:Roboto-regular;
font-size: 12px;
color:#4f4f51;
height: 36px;
width:70%;
margin-left: 18px;
vertical-align: middle;
line-height: 36px;
float: left;
overflow: hidden;
}
#header2 {
display:inline-block;
margin-right:20%;
right:0px;
float:right;
margin-right: 14px;
vertical-align: middle;
line-height: 36px;
}
.img
{
height:15px;
width:15px;
}
.opporMain {
-webkit-box-shadow: 0px 1px 1px 1px rgba(194, 194, 194, 0.4);
-moz-box-shadow: 0px 1px 1px 1px rgba(194, 194, 194, 0.4);
box-shadow: 0px 1px 1px 1px rgba(194, 194, 194, 0.4);
/*-webkit-box-shadow: 1px 1px 2px 1px rgba(194,194,194,0.4);
-moz-box-shadow: 1px 1px 2px 1px rgba(194,194,194,0.4);
box-shadow: 1px 1px 2px 1px rgba(194,194,194,0.4);*/
margin-left:12px;
margin-right:12px;
}
.opporHeader {
clear:both;
position:relative;
display:inline-block;
display:block;
background-color:#ffffff;
overflow:auto;
min-height:40px;
}
.clear {
clear:both;
height:12px;
}
.clearOppr {
clear:both;
height:10px;
}
.circleIcon {
float:left;
display:inline-block;
width: 28px;
height: 28px;
margin-top:6px;
-wsebkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
background-color:#ffb400;
margin-left: 8px;
text-align: center;
font-family: Roboto-Light;
font-size:18px;
color:White;
vertical-align: middle;
line-height: 25px;
}
.opporHeading {
position: absolute;
float: right;
display: inline-block;
font-family: Roboto-bold;
font-weight: 700;
font-size: 14px;
column-rule: #000;231f20;
margin-top: 10px;
margin-left: 8px;
}
hr {
clear:both;
padding:0px;
margin:0px;
}
.lineDiv {
border-bottom: 1px solid #c2c2c2;
}
.opporContent {
background-color:#ffffff;
overflow:auto;
padding-bottom:12px;
}
.opporComment
{
height:30px;
background-color:#ffffff;
overflow:auto;
}
.contentStatus
{
display: inline-block;
float:left;
font-family:RobotoSlab-Regular;
font-weight:400;
font-size:13px;
color:#4554a5;
margin-top:10px;
margin-left:8px;
}
.contentStatusDate
{
display: inline-block;
float:left;
font-family:RobotoSlab-Bold;
font-size:13px;
font-weight:700;
color:#4554a5;
margin-top:10px;
margin-left:5px;
}
.contentMainContent
{
font-family:'RobotoSlab-Light';
font-weight: 300;
font-size:12px;
margin-top:8px;
margin-left:8px;
}
.clearContent
{
clear:both;
}
.contentUpdateTime
{
float:right;
font-family:Roboto-Light;
font-weight:100;
font-size:10px;
color:#b1b3b6;
margin-top:20px;
margin-right:10px;
}
.contentUpdateBy
{
float:right;
font-family:Roboto-Light;
font-size:12px;
font-weight:300;
color:#b1b3b6;
margin-top:4px;
margin-right:10px;
}
.opporCommentContent
{
display: inline-block;
float:left;
font-family: Roboto-Medium;
font-weight: 500;
font-size:12px;
margin-top:8px;
margin-left:6px;
color:#4f4f51;
}
.commentIcon
{
display: inline-block;
float:left;
margin-top:8px;
margin-left:8px;
}
.opporCommentDetails
{
float:right;
margin-top:8px;
margin-right:10px;
font-family: Roboto-Light;
font-size:12px;
color:#b1b3b6;
}
3 answers
solution1
1 2014-12-26 12:15:47
DEMO
* {
box-sizing: border-box;
}
#header1Main {
background-color: #ffffff;
}
#header1 {
display: inline-block;
font-family: Roboto-regular;
font-size: 12px;
color: #4f4f51;
height: 36px;
width: 70%;
margin-left: 18px;
vertical-align: middle;
line-height: 36px;
}
#header2 {
display: inline-block;
margin-right: 20%;
right: 0px;
margin-right: 14px;
vertical-align: middle;
line-height: 36px;
}
.img {
height: 15px;
width: 15px;
display: inline-block;
vertical-align: middle;
}
.opporMain {
margin-left: 12px;
margin-right: 12px;
}
.opporHeader {
display: inline-block;
background-color: #ffffff;
padding: 5px;
min-height: 40px;
}
.clear {
clear: both;
height: 12px;
}
.clearOppr {
clear: both;
height: 10px;
}
.circleIcon {
display: inline-block;
width: 28px;
height: 28px;
margin: 14px 8px 0px;
-wsebkit-border-radius: 14px;
border-radius: 14px;
background-color: #ffb400;
float: left;
text-align: center;
font-family: Roboto-Light;
font-size: 18px;
color: White;
vertical-align: middle;
line-height: 25px;
}
.opporHeading {
font-family: Roboto-bold;
font-weight: 700;
font-size: 14px;
column-rule: #000;
231f20;
margin-top: 10px;
margin-left: 8px;
}
hr {
clear: both;
padding: 0px;
margin: 0px;
}
.lineDiv {
border-bottom: 1px solid #c2c2c2;
}
.opporContent {
background-color: #ffffff;
overflow: auto;
padding-bottom: 12px;
}
.opporComment {
height: 30px;
background-color: #ffffff;
}
.contentStatus {
display: inline-block;
float: left;
font-family: RobotoSlab-Regular;
font-weight: 400;
font-size: 13px;
color: #4554a5;
margin-top: 10px;
margin-left: 8px;
}
.contentStatusDate {
display: inline-block;
font-family: RobotoSlab-Bold;
font-size: 13px;
font-weight: 700;
color: #4554a5;
margin-top: 10px;
margin-left: 5px;
}
.contentMainContent {
font-family: 'RobotoSlab-Light';
font-weight: 300;
font-size: 12px;
margin-top: 8px;
margin-left: 8px;
}
.clearContent {
clear: both;
}
.contentUpdateTime {
float: right;
font-family: Roboto-Light;
font-weight: 100;
font-size: 10px;
color: #b1b3b6;
margin-top: 20px;
margin-right: 10px;
}
.contentUpdateBy {
float: right;
font-family: Roboto-Light;
font-size: 12px;
font-weight: 300;
color: #b1b3b6;
margin-top: 4px;
margin-right: 10px;
}
.opporCommentContent {
display: inline-block;
float: left;
font-family: Roboto-Medium;
font-weight: 500;
font-size: 12px;
margin-top: 8px;
margin-left: 6px;
color: #4f4f51;
}
.commentIcon {
display: inline-block;
float: left;
margin-top: 8px;
margin-left: 8px;
}
.opporCommentDetails {
float: right;
margin-top: 8px;
margin-right: 10px;
font-family: Roboto-Light;
font-size: 12px;
color: #b1b3b6;
}
solution2
1 2014-12-26 12:32:13
.opporHeading {
/*position: absolute;
float: right;
display: inline-block;*/
font-family: Roboto-bold;
font-weight: 700;
font-size: 14px;
column-rule: #000;231f20;
margin-top: 10px;
margin-left: 8px;
padding-left: 30px;
}
solution3
0 2014-12-26 12:21:46
To make the div height dynamically change with content I would recommend you to use Ajax. You can change like this:
$("<div>Text content</div>").appendTo($("#divid"))
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can i auto adjust the height of my div based on image Size
How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript?
How can I make a div's visibility depend on an object's scrollHeight and height properties?
tumblr - How can I make a div appear based on the height of a certain post's caption?
How can I make a div's height and width the same using responsive design?
How can I make the height of a div bigger onclick of a button and then change back to it's original height when click again?
AJAX div content not auto-adjusting page height
Height of div adjusting to resolution
dynamically adjusting height of div
Adjusting height of scrolling div
Related Tags