We Keep Coding

Anyone have easy way to create this using css and html?

I have done this with below code, But I this it is a difficult way to do this anyone have easy way for create this with css and html.
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>

.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>

In this way you can add as many items as you want.
.p {
display: flex;
position: relative;
padding-top: 15px;
border-top: 2px solid red;
margin-bottom: 30px;
}
.p div {
position: relative;
flex: 1;
text-align: center;
}
.p div:after {
content: '';
position: absolute;
height: 15px;
width: 2px;
background: red;
top: -15px;
}
.p div:not(:first-child):not(:last-child):after {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.p div:first-child {
text-align: left;
}
.p div:first-child:after {
left: 0;
}
.p div:last-child {
text-align: right;
}
.p div:last-child:after {
right: 0;
}
<div class="p">
<div>
Low
</div>
<div>
Average
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -2
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
Average 2
</div>
<div>
High
</div>
</div>

This is just a sample you can modify it to meet your requirments
.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
}
<div class="box">
<div></div>
<div></div>
<div></div>
</div>

.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
padding-top:40px;
}
<div class="box">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>

.grid{width:calc(100% - 20px);max-width:1000px;margin:0 auto;;border-top:3px solid red;display:flex;flex-direction:row;align-items:baseline;justify-content: space-between;}
.fline{position:relative;overflow:hidden;min-height:40px;float: left;padding-top: 20px;}
.fline::before{position:absolute;content:"";top:0;width:2px;height:20px;background:red}
.fline:first-child::before{left:0}
.fline:nth-of-type(2)::before{left:calc(50% - 2px)}
.fline:last-child::before{left:unset;right:0}
<div class="grid">
<div class="fline">Low</div>
<div class="fline">High</div>
<div class="fline">Average</div>
</div>

.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline">Low</div>
<div class="fline1">Average</div>
<div class="fline2">High</div>

First you need to define one outer wrap and define width as you want to this.
And position:relative for this.
For first inner div with float:left; and last with float:right;.
And center div with position:absolute; with margin:auto; from left and right;
And margin-top depend on your parent div outer-wrap width for inner div like: fline,fline1,fline2
.outer-wrap{
width: 80%;
height: 1px;
background-color: #000;
margin: auto;
text-align: center;
position: relative;
}
.fline {
width: 2px;
background-color: black;
height: 10px;
float: left;
margin-top: 1px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
float: right;
margin-top: 1px;
}
<div class="outer-wrap">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
</div>

This one is the right answer to this question
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>

Create a new div on selecting the menu in javascript

I was working the project where there is two view and three view (or if possible multiple view). Here in my code selected option normal creates two div placed vertically and Three view creates three view vertically (i.e adding one more div in Normal option). Here default one is Normal
.header{
width:100%;
height:40px;
background:#f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top:0px;
color: green;
font-weight:bold;
}
.container{
width: 100%;
min-height: 150px;
padding-top:2px;
display: flex;
}
.container .box1{
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #inside{
width:100%;
height:35px;
border: 1px solid #dbdfe5;
padding-bottom:10px;
border-radius: 1px;
background:#f4f3f1;
}
.container .box1.box2{
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second{
width:100%;
height:35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom:10px;
background:#f4f3f1;
}
.tabb{
float:left;
margin-left:10px;
margin:5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<body>
<div class="header">
<select class="tabb" name="opt" id="opt" >
<option value="two">Normal </option>
<option value="three">Three view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="inside" >
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second" >
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
</div>
</body>
Currently by default two div is created, how can I create 3 div on selecting the Three view of selection menu, placed vetically. In code how to dynamically create <div class="box1 box2 box3"> .

You mean this?
Also IDs need to be unique
$(function() {
$("#opt").on("change", function() {
$(".box3").toggle(this.value == "three"); // toggle will show if true, hide if false
}).change()
})
.header {
width: 100%;
height: 40px;
background: #f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top: 0px;
color: green;
font-weight: bold;
}
.container {
width: 100%;
min-height: 150px;
padding-top: 2px;
display: flex;
}
.container .box1 {
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #first {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
padding-bottom: 10px;
border-radius: 1px;
background: #f4f3f1;
}
.container .box1.box2 {
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box3 #third {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.tabb {
float: left;
margin-left: 10px;
margin: 5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<select class="tabb" name="opt" id="opt">
<option value="two">Normal </option>
<option value="three">Three view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="first">
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second">
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
<div class="box1 box2 box3">
<div id="third">
<center>Inside Box3</center>
</div>
<center>Main Box3</center>
</div>
</div>
</body>
To add views, try this:
var views = {
"three": ".box3",
"four": ".box3,.box4"
}
$(function() {
$("#opt").on("change", function() {
var view = views[this.value]; // if three or four
$(".box3,.box4").hide(); // hide anyway
if (view) $(view).show(); // show box2 or box3 and box4
}).change()
})
.header {
width: 100%;
height: 40px;
background: #f4f3f1;
border: 1px solid #dbdfe5;
text-align: center;
font-size: 20px;
padding-top: 0px;
color: green;
font-weight: bold;
}
.container {
width: 100%;
min-height: 150px;
padding-top: 2px;
display: flex;
}
.container .box1 {
background: #ffffff;
border-radius: 3px;
border: 2px solid #dbdfe5;
flex: 1;
overflow: auto;
}
.container .box1 #first {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
padding-bottom: 10px;
border-radius: 1px;
background: #f4f3f1;
}
.container .box1.box2 {
background: #ffffff;
border-radius: 3px;
overflow: auto;
}
.container .box1.box2 #second {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box3 #third {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.container .box1.box2.box4 #fourth {
width: 100%;
height: 35px;
border: 1px solid #dbdfe5;
border-radius: 5px;
padding-bottom: 10px;
background: #f4f3f1;
}
.tabb {
float: left;
margin-left: 10px;
margin: 5px;
display: inline-block;
padding: 6px 12px;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<select class="tabb" name="opt" id="opt">
<option value="two">Normal </option>
<option value="three">Three view</option>
<option value="four">Four view</option>
</select>
Demo </div>
<div class="container">
<div class="box1">
<div id="first">
<center>Inside Box1</center>
</div>
<center>Main Box1</center>
</div>
<div class="box1 box2">
<div id="second">
<center>Inside Box2</center>
</div>
<center>Main Box2</center>
</div>
<div class="box1 box2 box3">
<div id="third">
<center>Inside Box3</center>
</div>
<center>Main Box3</center>
</div>
<div class="box1 box2 box4">
<div id="fourth">
<center>Inside Box4</center>
</div>
<center>Main Box4</center>
</div>
</div>
</body>

first you must addEventListener for your select input and when you chose Three View:
//create div element
const div = documnet.createElement('div');
// add class name
div.className = 'box1 box2 box3';
// get container
const container = document.getElementsByClassName('container')[0];
// add div to container
container.appendChild(div);

Reduce the font size of span text when two lines

var divWidth = parseInt($("#printtdtelno").closest('td').height());
var text = parseInt($("#printtdtelno").height());
var fontSize = parseInt($("#printtdtelno").css("font-size"));
console.log('span height ' + parseInt($("#printtdtelno").height()))
console.log('span width ' + parseInt($("#printtdtelno").width()))
console.log('td height ' + parseInt($("#printtdtelno").closest('td .wrapper').height()))
console.log('td width ' + parseInt($("#printtdtelno").closest('td .wrapper').width()))
console.log(text > divWidth)
//while (text > divWidth) {
if (text == divWidth) {
$("#printtdtelno").css("font-size", fontSize -= 0.5);
console.log(fontSize -= 0.5)
}
//}
body{
height:auto;
width:1100px;
margin:0;
padding:0;
margin-left: auto;
margin-right: auto;
//background-color:#000;
}
.wrapper {
position: relative;
}
.wrapper .underline:not(#octtext):not(#tcttext):not(#cloatext) {
position: absolute;
//text-transform: uppercase;
right: 0;
}
span.underline {
font-size: 18.5px;
border-bottom: 1px solid #000000;
text-align: center;
min-height: 24px;
}
/*span.appraise1 {
text-align: center;
}*/
span#printtdtdno{
display:inline-block;
width: 87%;
}
span.taxdecrow1{
display:inline-block;
width: 55%;
}
span.taxdecrow2{
display:inline-block;
width: 90%;
}
span.taxdecrow3{
display:inline-block;
width: 90%;
}
span.taxdecrow3phone{
display:inline-block;
width: 60%;
}
span.taxdecrow4{
display:inline-block;
width: 65%;
}
span#printtdadmintin{
display:inline-block;
width: 90%;
}
span.taxdecrow5{
display:inline-block;
width: 65%;
}
span.taxdecrow6{
display:inline-block;
width: 80%;
}
span#printtdsurvey{
display:inline-block;
width: 80%;
}
span.underline1{
font-size: 20px;
//border-bottom: 1px solid #000000;
text-align: center;
text-decoration: underline;
}
span.underline1:empty{
display:inline-block;
border-bottom: 1px solid #000000;
min-width:90%;
}
.memo {
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 84px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
.memo:empty{
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 102px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
/*.memo {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
text-align: justify;
background: url("../images/lines.png") repeat;
}
.memo:empty {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
background: url("../images/lines.png") repeat;
}*/
table{
margin-top: 0;
height:auto;
width:1050px;
font-size: 18.5px;
}
table td{
height: 25px;
}
.appraise {
margin: 0px;
display:inline-block;
min-width: 150px;
}
.appraise1 {
margin: 0px;
display:inline-block;
min-width: 100px;
border-bottom: 1px solid #000000;
}
.appraise11 {
margin: 0px;
display:inline-block;
}
#pmemo{
text-decoration: underline;
}
#spanunderline{
width:1050px;
}
.rightborderonly{
border-right: 1px solid black;
}
.annotate {
display:inline-block;
vertical-align:top
}
.annotate .note {
display:block;
font-size:smaller;
font-style:italic;
text-align: center;
}
#headeroftaxdec{
margin-top: 27px;
}
#headeroftaxdec h2{
margin: 0;
}
#headeroftaxdec span:nth-child(1){
float: left;
font-size: smaller;
}
#headeroftaxdec span{
display: inline-block;
}
#headeroftaxdec{
text-align: center;
width: 100%;
}
#propertykindtaxdec{
font-size: x-large;
font-weight: bold;
}
.amountinwords{
white-space: nowrap
}
.amountinwords span.inline{
display: inline-block;
}
#printtdassessedvalwords{
border-bottom: 1px solid #000000;
}
.tablewithpadding td{
padding-left: 70px;
padding-right: 70px;
}
.allcaps{
/* text-transform: uppercase;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
<tbody>
<tr>
<td width="70%">
<div class="wrapper">
Owner:<span type="text" id="printtdowner" class=" underline taxdecrow2"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdtin" class=" underline taxdecrow2"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdaddress" class="underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdtelno" class="underline taxdecrow3phone">291-894-351 / 902-910-908</span>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div class="wrapper">
Administrator/Beneficial User: <span type="text" id="printtdadministrator" class=" underline taxdecrow4"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdadmintin" class=" underline taxdecrow4"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdadminaddress" class=" underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdadmintel" class=" underline taxdecrow3phone"> </span>
</div>
</td>
</tr>
</tbody>
</table>
AIM:
Reduce the font size of span when two lines to make it one line. (Telephone Number span)
Found this post and copied the solution but when i implement it, it is reducing the font size infinitely i guess because the browser stops.
I commented the while loop to make the browser not hang. I even added an if statement but it no help

you should try white-space property
.wrapper span{ white-space: nowrap;}
var divWidth = parseInt($("#printtdtelno").closest('td').height());
var text = parseInt($("#printtdtelno").height());
var fontSize = parseInt($("#printtdtelno").css("font-size"));
console.log('span height ' + parseInt($("#printtdtelno").height()))
console.log('span width ' + parseInt($("#printtdtelno").width()))
console.log('td height ' + parseInt($("#printtdtelno").closest('td .wrapper').height()))
console.log('td width ' + parseInt($("#printtdtelno").closest('td .wrapper').width()))
console.log(text > divWidth)
//while (text > divWidth) {
if (text == divWidth) {
$("#printtdtelno").css("font-size", fontSize -= 0.5);
console.log(fontSize -= 0.5)
}
//}
body{
height:auto;
width:1100px;
margin:0;
padding:0;
margin-left: auto;
margin-right: auto;
//background-color:#000;
}
.wrapper {
position: relative;
}
.wrapper .underline:not(#octtext):not(#tcttext):not(#cloatext) {
position: absolute;
//text-transform: uppercase;
right: 0;
}
span.underline {
font-size: 18.5px;
border-bottom: 1px solid #000000;
text-align: center;
min-height: 24px;
}
/*span.appraise1 {
text-align: center;
}*/
span#printtdtdno{
display:inline-block;
width: 87%;
}
span.taxdecrow1{
display:inline-block;
width: 55%;
}
span.taxdecrow2{
display:inline-block;
width: 90%;
}
span.taxdecrow3{
display:inline-block;
width: 90%;
}
span.taxdecrow3phone{
display:inline-block;
width: 60%;
}
span.taxdecrow4{
display:inline-block;
width: 65%;
}
span#printtdadmintin{
display:inline-block;
width: 90%;
}
span.taxdecrow5{
display:inline-block;
width: 65%;
}
span.taxdecrow6{
display:inline-block;
width: 80%;
}
span#printtdsurvey{
display:inline-block;
width: 80%;
}
span.underline1{
font-size: 20px;
//border-bottom: 1px solid #000000;
text-align: center;
text-decoration: underline;
}
span.underline1:empty{
display:inline-block;
border-bottom: 1px solid #000000;
min-width:90%;
}
.memo {
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 84px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
.memo:empty{
background: repeating-linear-gradient(to bottom, transparent 0, transparent 18px, #000 20px, #000 21px);
background-attachment: local;
display: inline-block;
width: 100%;
min-height: 102px;
font-size: 14px;
line-height: 1.5;
font-family: Tahoma, sans-serif;
}
/*.memo {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
text-align: justify;
background: url("../images/lines.png") repeat;
}
.memo:empty {
min-height: 85px;
width:100%;
display: inline-block;
line-height: 21px;
background: url("../images/lines.png") repeat;
}*/
table{
margin-top: 0;
height:auto;
width:1050px;
font-size: 18.5px;
}
table td{
height: 25px;
}
.appraise {
margin: 0px;
display:inline-block;
min-width: 150px;
}
.appraise1 {
margin: 0px;
display:inline-block;
min-width: 100px;
border-bottom: 1px solid #000000;
}
.appraise11 {
margin: 0px;
display:inline-block;
}
#pmemo{
text-decoration: underline;
}
#spanunderline{
width:1050px;
}
.rightborderonly{
border-right: 1px solid black;
}
.annotate {
display:inline-block;
vertical-align:top
}
.annotate .note {
display:block;
font-size:smaller;
font-style:italic;
text-align: center;
}
#headeroftaxdec{
margin-top: 27px;
}
#headeroftaxdec h2{
margin: 0;
}
#headeroftaxdec span:nth-child(1){
float: left;
font-size: smaller;
}
#headeroftaxdec span{
display: inline-block;
}
#headeroftaxdec{
text-align: center;
width: 100%;
}
#propertykindtaxdec{
font-size: x-large;
font-weight: bold;
}
.amountinwords{
white-space: nowrap
}
.amountinwords span.inline{
display: inline-block;
}
#printtdassessedvalwords{
border-bottom: 1px solid #000000;
}
.tablewithpadding td{
padding-left: 70px;
padding-right: 70px;
}
.allcaps{
/* text-transform: uppercase;*/
}
.wrapper span{ white-space: nowrap;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0">
<tbody>
<tr>
<td width="70%">
<div class="wrapper">
Owner:<span type="text" id="printtdowner" class=" underline taxdecrow2"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdtin" class=" underline taxdecrow2"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdaddress" class="underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdtelno" class="underline taxdecrow3phone">291-894-351 / 902-910-908</span>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div class="wrapper">
Administrator/Beneficial User: <span type="text" id="printtdadministrator" class=" underline taxdecrow4"></span>
</div>
</td>
<td width="30%">
<div class="wrapper">
TIN:<span type="text" id="printtdadmintin" class=" underline taxdecrow4"></span>
</div>
</td>
</tr>
<tr>
<td>
<div class="wrapper">
Address: <span type="text" id="printtdadminaddress" class=" underline taxdecrow3"></span>
</div>
</td>
<td>
<div class="wrapper">
Telephone No. <span type="text" id="printtdadmintel" class=" underline taxdecrow3phone"> </span>
</div>
</td>
</tr>
</tbody>
</table>

within in the div iframe not displaying in html

In the code below, the left side div is displaying correctly, but the right side of the div in that iframe is displaying outside of the div. It is displaying top, but I want to display with in the div space.
html
<div id="details">
<div id="left">
<h2>Bangalore</h2>
<img src="img/vcare_logo.png" width="100" height="83" alt="smoothy html5 template" hspace="50"/>
<p><b><strong>rgd</b></strong><br>gf560032</p>
</div>
<div id="right">
<h2>Upcoming News</h2>
<iframe id="NewsWindow" seamless src="news_win.htm" width="150" height="204" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="display: block; margin: 0 auto; padding: 0; border: #000000 1px solid;"></iframe>
</div>
</div>
css
#details {
overflow:auto;
width: 1050px;
border: 1px solid black;
background: gray;
margin: 2em auto;
}
#details h2{
background-color: #A52A2A;
color: #FFFFFF;
font: 13px arial, sans-serif;
font-weight: bold;
text-align: center;
padding: 3px;
}
#left, #right {
width: 45%;
margin:5px;
padding: 1em;
background: white;
}
#left {
float:left;
}
#right {
width: 158px;
border: #000000 1px solid;
background-color: #339999;
text-align: center;
padding: 0px 2px 7px 2px;
position: absolute;
visibility: visible;
left: 100px;
top: 100px;
z-index:3;
float:right;
}

First of all change your html code from <p><b><strong>rgd</b></strong>�� to <p><strong><b>rgd</b></strong>.
and then change your css for #right, remove absolute positioning and make it float left as:
#right {
width: 158px;
border: #000000 1px solid;
background-color: #339999;
text-align: center;
padding: 0px 2px 7px 2px;
visibility: visible;
left: 100px;
top: 100px;
z-index:3;
float:left;
}

Horizontally center few divs with different width inside one div

I got problem with centering divs inside one div. In each div threre are should be the letters (username of the person).
So I got such picture
Here JSFIDDLE
Also here is the code
HTML
<div class="centered">
<div class="inner" id="first" style="margin-top: 580px;">
<div id="mainword" class="mainfont" style="text-align:center">
<div class="letters" id="A" style="display: block;"></div>
<div class="letters" id="B" style="display: block;"></div>
<div class="letters" id="C" style="display: block;"></div>
<div class="letters" id="D" style="display: block;"></div>
<div class="letters" id="E" style="display: block;"></div>
</div>
</div>
CSS
.letters{
width:30px;
height:50px;
float: left;
margin:1px;
text-align:left;
border: 4px solid red;
display:inline-block;
}
.mainfont{
font-family: 'Cinzel', serif;
font-size:40px;
color:#ffffff;
text-align: center;
margin:1%;
}
#mainword{
text-align:center;
display:inline-block;
width:100%;
height: 30pt;
border: 1px solid black;
}
.inner{
width: 100%;
margin: 0 auto;
}
#A {
/*background:url(A.png) left top; */
background-repeat: no-repeat;
background-repeat: no-repeat; width:25px !important;
}
#B {
/*background:url(B.png) left top; */
background-repeat: no-repeat;
width:19px !important;
}
#C{
/*background:url(C.png) left top; */
background-repeat: no-repeat;
width:10px !important;
}
#D{
/*background:url(D.png) left top; */
background-repeat: no-repeat;
width:21px !important
}
#E{
/* background:url(E.png) left top; */
background-repeat: no-repeat;
}
How to center it? I tried text align and stuff but it seems doesn't work here

Demo http://jsfiddle.net/6ghv3905/3/
All you need to do is apply display: inline-block; on .letters and remove display: block; and float: left; from them.

You can use full responsive design code. It may be help for you.
Live Working Demo
HTML Code:
<div class="main">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
CSS Code:
.main
{
height:50px;
width: 100%;
border: 1px solid #000000;
margin-top: 50px;
}
.one
{
height: 60px;
width: 30px;
border: 5px solid red;
position: relative;
float: left;
margin-left: 35%;
}
.two
{
height: 60px;
width: 25px;
border: 5px solid red;
position: relative;
float: left;
margin-left: 15px;
}
.three
{
height: 60px;
width: 15px;
border: 5px solid red;
position: relative;
float: left;
margin-left: 15px;
}
.four
{
height: 60px;
width: 30px;
border: 5px solid red;
position: relative;
float: left;
margin-left: 15px;
}
.five
{
height: 60px;
width: 35px;
border: 5px solid red;
position: relative;
float: left;
margin-left: 15px;
}
Result:
http://i.stack.imgur.com/a4yZC.png