HTML-BROWSER ZOOM CAUSES ALIGNMENT PROBLEMS - html

I have 2 div elements with float left and float right withiin a div element..when i zoom the browser,all the alignment changes..the zooming should be like...how we zoom an image....can anyone give suggestions to resolve this problem
<html>
<style type="text/css">
div.advancedDrugSearchOuterLayout
{
border-style: groove;
border-color: #005ce5;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height: 430px;
zoom: 200%;
}
div.searchByBlock{
border-style: ridge;
border-color: #000;
float: left;
height: 70%;
width: 46%;
margin-left: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.narrowByBlock{
border-style: ridge;
border-color: #000;
float: right;
height: 70%;
width: 46%;
margin-right: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.searchByText{
margin-left: 2%;
float:left;
text-align:left;
width:46%;
}
div.narrowByText{
margin-right: 1.5%;
float:right;
text-align:left;
width:46%;
}
div.compareAndClearFields{
margin-left: 2%;
float:left;
text-align:center;
width:46%;
}
div.errorMessageDisplayforAdvanceDrugSearch{
margin-left: 2%;
float:right;
text-align:center;
width:46%;
}
div.advancedDrugSearchText{
margin-left: 2%;
}
div.textBelowAdvancedDrugSearchText{
margin-left: 2%;
}
div.browseClassesLink{
float:right;
}
input.search{
background-color: #007fea;
height:30px;
width:40%;
font: bold;
font-color: white;
margin-left: 3%;
}
table.blocksForSearchByAndNarrowBy{
margin-bottom:3%;
}
</style>
<body>
<div class="claro">
<div class="advancedDrugSearchOuterLayout">
<div class="advancedDrugSearchText">
<font size="4" color= "mediumorchid"><b>THIS iS AN EXAMPLE</b></font>
</div>
<div class="textBelowAdvancedDrugSearchText">
<font size="3" ><i>THESE ARE DATABASE TEXT</a>
</div>
<div>
<div class="searchByText">
<font size="2"><u><b>searchBy</b><i>SearchTermIsrequired</i></u></font>
</div>
<div class="narrowByText">
<font size="2"><u><b>narrow</b><i>(optional)</i></u></font>
</div>
</div>
<div class="searchByBlock">
<table border="1"">
<tr><td style="width:100px"></td>
<td><div style="float:right"><a href="#">Browse list of classes</div>
</td></tr>
</table>
<div>
<div style="float:left">
<font size="3">drugClass</font>
</div>
<div style="float:right">
<input id="selectDrugClasses">
</div>
</div>
<div>
<table>
<tr>
<td height="110"></td>
<td height="110"></td>
</tr>
</table>
</div>
<div>
<div style="float:left">
<font size="3">CLASS</font>
</div>
<div style="float:right">
<input id="selectIndications">
</div>
</div>
</div>
<div class="narrowByBlock">
<table><tr><td style="width:10px"></td>
<td> <div style="float:right"><input type="radio" checked="true">include
<input type="radio">exclude
</div>
</td>
</tr>
</table>
<div style="float:left">
<font size="3">CLINICAL</font>
</div>
<div style="float:right">
<input id="selectAdverseEffects">
</div>
<div>
<table>
<tr>
<td height="90"></td>
<td height="90"></td>
</tr>
</table>
</div>
<table border="1"><tr><td style="width:10px"></td>
<td><div style="float:right">
<input type="radio" checked="true">include
<input type="radio">exclude
</div></td></tr>
</table>
<div>
<div style="float:left">
<font size="3">Suggestion</font>
</div>
<div style="float:right">
<input id="selectDrugInteractions">
</div>
</div>
</div>
<div>
<div class="compareAndClearFields">
<input class="search" type="submit" value="Search & Compare Drugs" name="submit" id="formSubmit" onClick="submitForm()">
<a onClick="resetForm()">clearAllFields</a>
</div>
</div>
</div>
</div>
</body>
</html>


I just add a div that has a solid size.
Here's mine, and may be it's what you wonder :
<html>
<style type="text/css">
.allbody{
width : 1024px;
height: auto;
margin: 0px auto;
}
div.advancedDrugSearchOuterLayout
{
border-style: groove;
border-color: #005ce5;
margin-left:10%;
margin-right:10%;
margin-top:1%;
height: 430px;
zoom: 200%;
}
div.searchByBlock{
border-style: ridge;
border-color: #000;
float: left;
height: 70%;
width: 46%;
margin-left: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.narrowByBlock{
border-style: ridge;
border-color: #000;
float: right;
height: 70%;
width: 46%;
margin-right: 2%;
margin-top:1%;
margin-bottom:1%;
}
div.searchByText{
margin-left: 2%;
float:left;
text-align:left;
width:46%;
}
div.narrowByText{
margin-right: 1.5%;
float:right;
text-align:left;
width:46%;
}
div.compareAndClearFields{
margin-left: 2%;
float:left;
text-align:center;
width:46%;
}
div.errorMessageDisplayforAdvanceDrugSearch{
margin-left: 2%;
float:right;
text-align:center;
width:46%;
}
div.advancedDrugSearchText{
margin-left: 2%;
}
div.textBelowAdvancedDrugSearchText{
margin-left: 2%;
}
div.browseClassesLink{
float:right;
}
input.search{
background-color: #007fea;
height:30px;
width:40%;
font: bold;
font-color: white;
margin-left: 3%;
}
table.blocksForSearchByAndNarrowBy{
margin-bottom:3%;
}
</style>
<body>
<div class="allbody">
<div class="claro">
<div class="advancedDrugSearchOuterLayout">
<div class="advancedDrugSearchText">
<font size="4" color= "mediumorchid"><b>THIS iS AN EXAMPLE</b></font>
</div>
<div class="textBelowAdvancedDrugSearchText">
<font size="3" ><i>THESE ARE DATABASE TEXT</a>
</div>
<div>
<div class="searchByText">
<font size="2"><u><b>searchBy</b><i>SearchTermIsrequired</i></u></font>
</div>
<div class="narrowByText">
<font size="2"><u><b>narrow</b><i>(optional)</i></u></font>
</div>
</div>
<div class="searchByBlock">
<table border="1"">
<tr><td style="width:100px"></td>
<td><div style="float:right"><a href="#">Browse list of classes</div>
</td></tr>
</table>
<div>
<div style="float:left">
<font size="3">drugClass</font>
</div>
<div style="float:right">
<input id="selectDrugClasses">
</div>
</div>
<div>
<table>
<tr>
<td height="110"></td>
<td height="110"></td>
</tr>
</table>
</div>
<div>
<div style="float:left">
<font size="3">CLASS</font>
</div>
<div style="float:right">
<input id="selectIndications">
</div>
</div>
</div>
<div class="narrowByBlock">
<table><tr><td style="width:10px"></td>
<td> <div style="float:right"><input type="radio" checked="true">include
<input type="radio">exclude
</div>
</td>
</tr>
</table>
<div style="float:left">
<font size="3">CLINICAL</font>
</div>
<div style="float:right">
<input id="selectAdverseEffects">
</div>
<div>
<table>
<tr>
<td height="90"></td>
<td height="90"></td>
</tr>
</table>
</div>
<table border="1"><tr><td style="width:10px"></td>
<td><div style="float:right">
<input type="radio" checked="true">include
<input type="radio">exclude
</div></td></tr>
</table>
<div>
<div style="float:left">
<font size="3">Suggestion</font>
</div>
<div style="float:right">
<input id="selectDrugInteractions">
</div>
</div>
</div>
<div>
<div class="compareAndClearFields">
<input class="search" type="submit" value="Search & Compare Drugs" name="submit" id="formSubmit" onClick="submitForm()">
<a onClick="resetForm()">clearAllFields</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


We can limit the impact of alignment fail to a certain extend using css styling. If you intention is to make the page dynamically re align with zooming. I prefer you to make it an Responsive design. Use Boot Strap it is a powerful tool which can solve these issues.
Just as a temporary fix change these styles
div.searchByBlock {
border-color: #000000;
border-style: ridge;
float: left;
height: 70%;
margin: 1% 1% 1% 2%;
width: 45%;
}
div.narrowByBlock {
border-color: #000000;
border-style: ridge;
float: left;
height: 70%;
margin: 1% 2%;
width: 45%;
}
div.advancedDrugSearchOuterLayout {
border-color: #005CE5;
border-style: groove;
float: left;
height: 430px;
margin-left: 10%;
margin-right: 10%;
margin-top: 1%;
}

Related

Cannot get Div to fill full width on Wordpress

I am trying to make a div that covers the whole width of the screen so that section of the screen is coloured.
This is on wordpress and I am not sure how to fill the whole area.
(Visit Us/Deal/Book Now part is not working the way I want it to)
edit
The CSS code is updated but it only goes to half of the page width
body {
margin: 0;
}
section {
float:left;
overflow:auto;
width:100%;
}
.visit {
position:absolute;
left:0;
display: flex;
margin-left:-55px;
}
table {
width:100%;
padding-left: 0px;
}
tr {
padding:0px;
margin:0px;
border-width:0px;
background-color:#15b6b8;
}
td {
width:33%;
height:30%;
}
td h4 {
text-align:center;
}
input {
text-align:center;
width:80%;
}
<code>
<section class="1">
<div class="description">
<h3>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="visit">
<table width="100%">
<tbody>
<tr>
<td>
<h4>Visit Us</h4>
<!--map--></td>
<td>
<h4>Today's Deal</h4>
<!-- Deal Picture --></td>
<td>
<h4>Book Now</h4>
<form data-myki-checked-cc="3"><input name="qname" type="text"
placeholder="Name" />
<input name="qemail" type="text" placeholder="Email" />
<input name="qphone" type="text" placeholder="Phone Number" />
</form></td>
</tr>
</tbody>
</table>
</div>
</section>
</code>
This code result

In this case your code is inside the container which is the bootstrap class. In order to achieve what you are looking for is you can have a wrapper outside the container and set the background-color.
.wrapper {
background-color: green;
height:50px;
}
.container>div{
background-color:yellow;
height:50px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<!-- Your content -->
<div>This is a sample Content</div>
</div>
</div>

You could position it absolute at the left border like that:
section {
width: 100%;
padding: 0px;
margin: 0px;
border-width: 0px;
}
table {
width: 100%;
position: absolute;
left: 0;
}
tr {
padding: 0px;
margin: 0px;
border-width: 0px;
background-color: #15b6b8;
}
td {
width: 33%;
height: 30%;
}
td h4 {
text-align: center;
}
input {
text-align: center;
width: 80%;
}
<section class="1">
<div class="description">
<h3>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="visit">
<table width="100%">
<tbody>
<tr>
<td>
<h4>Visit Us</h4>
<!--map-->
</td>
<td>
<h4>Today's Deal</h4>
<!-- Deal Picture -->
</td>
<td>
<h4>Book Now</h4>
<form data-myki-checked-cc="3"><input name="qname" type="text" placeholder="Name" />
<input name="qemail" type="text" placeholder="Email" />
<input name="qphone" type="text" placeholder="Phone Number" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
</section>

section {
width: 100%;
padding: 0px;
margin: 0px;
border-width: 0px;
}
table {
float: left;
width: 100%;
padding-left: 0px;
}
tr {
padding: 0px;
margin: 0px;
border-width: 0px;
background-color: #15b6b8;
}
td {
width: 33%;
height: 30%;
}
td h4 {
text-align: center;
}
input {
text-align: center;
width: 80%;
}
.visit{
width: 100% auto;
}
.fix-column{
width: 1100px;
max-width: 1200px;
margin: 2em auto;
}
<code>
<section class="container">
<div class="description">
<h3>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="visit">
<div class="fix-column">
<table >
<tbody>
<tr>
<td>
<h4>Visit Us</h4>
<!--map-->
</td>
<td>
<h4>Today's Deal</h4>
<!-- Deal Picture -->
</td>
<td>
<h4>Book Now</h4>
<form data-myki-checked-cc="3">
<input name="qname" type="text" placeholder="Name" />
<input name="qemail" type="text" placeholder="Email" />
<input name="qphone" type="text" placeholder="Phone Number" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</code>
Here is link for demo full width text center demo

Without disturbing the document flow, you can use negative margin to reposition the element. What you need to find out is how much margin and/or padding is used for the parent(s). Below I use for the section: margin: 30px, padding: 10px.
As a result, the negative margin for the content is -40px.
The colors are used to improve visibility of the effect.
* {
box-sizing: border-box;
}
body {
background-color: green;
margin: 0;
}
section {
margin: 0 30px;
background-color: blue;
padding: 10px;
}
.title {
text-align: center;
}
.content {
background-color: red;
display: flex;
margin-left: -40px;
width: 100vw;
}
.content>h2 {
width: calc(100% / 3);
text-align: center;
}
<section>
<div class="title">
<h1>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="content">
<h2>Visit Us</h2>
<h2>Today's Deal</h2>
<h2>Book Now</h2>
</div>
</section>

how to wrap div elements boxes with responsive

How to wrap div boxes into main div along with images with responsive.?
Am trying to achieve below layout.
When i use float:left the boxes are aligned perfect where as without it if i use display inline block the boxes are not aligned as shown below.
My jfiddle
.mywrapper {
margin: 0 auto;
min-width: 320px;
max-width: 905px;
background: yellow;
}
.firstblock {
margin-top: 60px;
margin-bottom: 60px;
background: red;
//background: #2b2b2b;
padding:30px;
width:auto;
height:auto;
}
.mainimage{
width: 190px;
height: 125px;
margin-left:2%;
float:left;
padding-right:30px;
}
.smallbox{
float: left;
width: 190px;
height: 110px;
background-color: green;
margin-right:10px;
}
.secondblock {
margin-bottom: 30px;
height: 215px;
background: aqua;
padding:30px;
}
<div class="mywrapper" id="myid">
Hello
<div class="firstblock">
<div >
<img class="mainimage" src="mainimg.JPG" border="0" />
</div>
<div>
<h2 class="title"><span>MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT</span></h2>
<div class="smallbox"><img class="pcspecimg" src="box1.JPG" alt="box1.JPG" border="0" /><span>box1</span><div>MY TEXT</div></div>
<div class="smallbox"><img class="pcspecimg" src="box2.JPG" alt="box2.JPG" border="0" /><span>box2</span><div>MY TEXT MY TEXT</div></div>
<div class="smallbox"><img class="pcspecimg" src="box3.JPG" alt="box3.JPG" border="0" /><span>box3</span><div>MY TEXT MY TEXT</div></div>
</div>
</div>
<div class="secondblock">
secondblock
</div>
</div>

I think you would like this
.mywrapper {
margin: 0 auto;
min-width: 320px;
max-width: 905px;
background: yellow;
}
.firstblock {
margin-top: 60px;
margin-bottom: 60px;
background: red;
//background: #2b2b2b;
padding:30px;
width:auto;
height:auto;
}
.left-div{
float:left;
width: 27%;
height: 125px;
margin-right:2%;
border: 1px solid;
}
.right-div{
float:right;
width:70%;
}
h2{
margin-top:0;
}
.clear{
clear:both;
}
img{
height:auto;
width:auto;
max-width:100%;
max-height:100%;
}
.pcspecimg {
border: 1px solid #fff;
float: left;
height: 40px;
margin-right: 3%;
width: 27%;
}
.small-wrap {
margin-bottom: 5px;
}
.smallbox {
background-color: green;
float: left;
height: 110px;
margin-right: 1.5%;
width: 32.3%;
padding:5px;
box-sizing: border-box;
}
.smallbox:last-child{
margin-right:0;
}
.secondblock {
margin-bottom: 30px;
height: 215px;
background: aqua;
padding:30px;
}
<div class="mywrapper" id="myid">
Hello
<div class="firstblock">
<div class="left-div">
<img class="mainimage" src="mainimg.JPG" border="0" />
</div>
<div class="right-div">
<h2 class="title">
<span>MY TEXT MY TEXT</span>
</h2>
<div class="smallbox">
<div class="small-wrap">
<div class="pcspecimg">
<img src="box1.JPG" alt="box1" border="0" />
</div>
<span>box1</span>
<div class="clear"></div>
</div>
<div>MY TEXT</div>
</div>
<div class="smallbox">
<div class="small-wrap">
<div class="pcspecimg">
<img src="box1.JPG" alt="box1" border="0" />
</div>
<span>box1</span>
<div class="clear"></div>
</div>
<div>MY TEXT</div>
</div>
<div class="smallbox">
<div class="small-wrap">
<div class="pcspecimg">
<img src="box1.JPG" alt="box1" border="0" />
</div>
<span>box1</span>
<div class="clear"></div>
</div>
<div>MY TEXT</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="secondblock">
secondblock
</div>
</div>

.mywrapper {
margin: 0 auto;
min-width: 320px;
max-width: 905px;
background: yellow;
}
.firstblock {
display: flex;
flex-direction: row;
margin-top: 60px;
margin-bottom: 60px;
background: red;
//background: #2b2b2b;
padding:30px;
width:auto;
height:auto;
}
.mainimage{
width: 190px;
height: 125px;
margin-left:2%;
float:left;
padding-right:30px;
}
.smallbox{
float: left;
width: 190px;
height: 110px;
background-color: green;
margin-right:10px;
}
.secondblock {
margin-bottom: 30px;
height: 215px;
background: aqua;
padding:30px;
}
<div class="mywrapper" id="myid">
Hello
<div class="firstblock">
<div>
<img class="mainimage" src="mainimg.JPG" border="0" />
</div>
<div>
<h2 class="title"><span>MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT</span></h2>
<div class="smallbox"><img class="pcspecimg" src="box1.JPG" alt="box1.JPG" border="0" /> <span>box1</span><div>MY TEXT</div>
</div>
<div class="smallbox"><img class="pcspecimg" src="box2.JPG" alt="box2.JPG" border="0" /> <span>box2</span><div>MY TEXT MY TEXT</div>
</div>
<div class="smallbox"><img class="pcspecimg" src="box3.JPG" alt="box3.JPG" border="0" /> <span>box3</span><div>MY TEXT MY TEXT</div>
</div>
</div>
</div>
<div class="secondblock">
secondblock
</div>
</div>
Is it you want?
Can You explain detail?

CSS Horizontal space div table

I'm working on a div table in CSS. What I'm trying to do is to set the same space between margins and table cells and between table cells.
This is what I want to achieve:
But this is what it currently looks like:
I'm using this code for the class:
.tfoto{width:600px;
display:table;
margin-left:200px;
border-top-style:dotted;
border-bottom-style:dotted;
border-left-style:dotted;
border-right-style:dotted;
text-align:center;
background-color:transparent;
border-spacing:1px;
collapse:separate;}
.tcaption {display:table-caption;
font:"Traditional Arabic";}
.trow {display:table-row;
width:200px;
cell-spacing:5px;
padding:5px;}
.tdcell {display:table-cell;
width:200px;
padding:5px;}

Set Class
.imgs{
width:100%;
height:200px;
}
Checkout This :
.tfoto{width:600px;
display:table;
margin-left:200px;
border-top-style:dotted;
border-bottom-style:dotted;
border-left-style:dotted;
border-right-style:dotted;
text-align:center;
background-color:transparent;
border-spacing:1px;
collapse:separate;}
.tcaption {display:table-caption;
font:"Traditional Arabic";}
.trow {display:table-row;
width:200px;
cell-spacing:5px;
padding:5px;}
.tdcell {display:table-cell;
width:200px;
padding:5px;}
.imgs {width:100%;
height:200px;}
<div class="tfoto">
<div class="tcaption">
<p><em>Sample text.</em></p>
</div>
<div class="trow">
<div class="tdcell">
<img class="imgs" src="foto1.jpg">
</div>
<div class="tdcell">
<img class="imgs" src="foto2.jpg">
</div>
</div>
<div class="trow">
<div class="tdcell">
<img class="imgs" src="foto3.jpg">
</div>
<div class="tdcell">
<img class="imgs" src="foto4.jpg">
</div>
</div>
</div>

UPDATE
It looks like you were very close, but you had 2 crucial syntax errors, see Snippet 2:
collapse:separate;
AND
cell-spacing:5px;
Should be:
border-collapse:separate;
AND
border-spacing:5px
Now it looks exactly as you wanted it.
Use border-spacing
SNIPPET 1
table {
table-layout: fixed;
border-spacing: 5px;
outline: 5px solid #fff;
width: 200px;
height: 200px;
margin: 20px auto;
}
td {
outline: 5px solid #fff;
background: #000;
}
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
SNIPPET 2
.tfoto {
width: 600px;
display: table;
margin-left: 200px;
border-top-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-right-style: dotted;
text-align: center;
background-color: transparent;
border-spacing: 1px;
border-collapse: separate;
}
.tcaption {
display: table-caption;
font: "Traditional Arabic";
}
.trow {
display: table-row;
width: 200px;
border-spacing: 5px;
padding: 5px;
}
.tdcell {
display: table-cell;
width: 200px;
padding: 5px;
}
.imgs {
width: 100%;
height: 200px;
}
<div class="tfoto">
<div class="tcaption">
<p><em>Sample text.</em>
</p>
</div>
<div class="trow">
<div class="tdcell">
<img class="imgs" src="foto1.jpg">
</div>
<div class="tdcell">
<img class="imgs" src="foto2.jpg">
</div>
</div>
<div class="trow">
<div class="tdcell">
<img class="imgs" src="foto3.jpg">
</div>
<div class="tdcell">
<img class="imgs" src="foto4.jpg">
</div>
</div>
</div>

Align <div>'s in <td> horizontally

I want to align three div's horizontally in a td.
I want also change div of A and B in the picture below:
It is just important that A goes left side of the SecondOne and B on the right of it. I used span as well but it didn't work.
jsFiddle
<table>
<tr>
<td>
<div style="width: 55px; background: yellow; margin-left: 50px;">
FirstOne
</div>
</td>
<td>
<div style="width: 11px; background: red; margin-left: 50px">
A
</div>
<div style="width: 75px; background: green; margin-left: 50px;">
SecondOne
</div>
<div style="width: 11px; background: red; margin-left: 50px">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>
</tr>
</table>

set div to display:inline:block
Don't use inline styles.
.table-divs {
font-size: 0;
/*fix inline-block gap*/
border: 1px dashed red
}
.table-divs div {
display: inline-block;
font-size: 16px
/* set font-size again */
}
.table-divs td:nth-of-type(2) {
padding: 0 50px
}
.first {
width: 55px;
background: yellow;
}
.second {
width: 75px;
background: green;
}
.third {
width: 65px;
background: blue;
}
.a,
.b {
width: 11px;
background: red;
}
<table class="table-divs">
<tr>
<td>
<div class="first">
FirstOne
</div>
</td>
<td>
<div class="a">
A
</div>
<div class="second">
SecondOne
</div>
<div class="b">
B
</div>
</td>
<td>
<div class="third">
ThirdOne
</div>
</td>
</tr>
</table>
<hr />
<div class="a">
A
</div>
<div class="second">
SecondOne
</div>
<div class="b">
B
</div>
<div class="third">
ThirdOne
</div>

Add this to the style part of your middle 3 divs:
float: left;
So it becomes:
<table>
<tr>
<td>
<div style="width: 55px; background: yellow; margin-left: 50px;">
FirstOne
</div>
</td>
<td>
<div style="width: 11px; background: red; margin-left: 50px; float: left;">
A
</div>
<div style="width: 75px; background: green; margin-left: 50px;float: left;">
SecondOne
</div>
<div style="width: 11px; background: red; margin-left: 50px;float: left;">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>

You can use float property
below is the working fiddle
https://jsfiddle.net/w5zu09ny/1/

user "float: left" to put div on left and remove "margin-left" for secondOne and B
<table>
<tr>
<td>
<div style="width: 55px; background: yellow; margin-left: 50px;">
FirstOne
</div>
</td>
<td>
<div style="width: 11px; background: red; margin-left: 50px;float: left;">
A
</div>
<div style="width: 75px; background: green; float: left;">
SecondOne
</div>
<div style="width: 11px; background: red;float: left;">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>
</tr>
</table>

Try this
<td>
<div style="width: 11px;background: red;margin-left: 50px;float: left;">
A
</div>
<div style="width: 75px;background: green;float: left;">
SecondOne
</div>
<div style="width: 11px;background: red;float: left;">
B
</div>
</td>

Vertical Alignment-middle for textarea

I have a textarea message box with 2 rows and 20 columns. I want to keep the label for this box - 'Message' exactly in center outside textarea. What css properties should I use to align it ? I used the following method but it is not helping in my case.
CSS:
.headerImage {
width: 100%;
text-align: center;
}
.footer {
width: 100%;
text-align: center;
border: 0;
}
.page {
margin-top: 42px;
padding: 10px;
width: 866px;
text-align:left;
margin-left: auto;
margin-right: auto;
border: 1px solid #C0C0C0;
border-top: 0px;
margin-bottom: 10px;
}
.main {
margin: 10px;
border-style: groove;
padding: 20px;
}
.borderhead {
z-index: 10;
position: relative;
top:-32px;
left: 2px;
background: white;
}
.commonText {
font-family: arial;
font-size: 11px;
color: black;
text-align: left;
line-height: 16px;
}
.mandatoryStar {
color: red;
padding-right: 5px;
font-size: 12px;
}
.padTxtbox {
padding-left: 5px;
font-family: arial;
padding-bottom: 5px;
text-align: left;
color: black;
font-size: 11px;
display:inline;
position: relative;
}
.contactPad {
margin-left: 300px;
position: absolute;
display: inline;
font-family: arial;
font-size: 11px;
color: black;
text-align: left;
line-height: 16px;
}
.txtBox {
font-family: arial;
font-size: 11px;
width: 150px;
}
.errormsg {
font-family: arial;
font-size: 11px;
color: red;
}
.suggest {
padding-left: 10px;
font-family: arial;
font-size: 11px;
padding-bottom: 4px;
vertical-align: middle;
display: inline-block;
}
.multitxtboxLarge {
width: 420px;
font-family: arial;
font-size: 11px;
height: 80px;
color: black;
}
.cancel {
vertical-align: top;
padding-left: 100px;
}
.textarea {
vertical-align:middle;
display: inline-block;
}
HTML:
<div class ="pa">
<br>
<div class="col-md-6 col-md-offset-2">
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li class="active">Suggestions</li>
<li>Contact</li>
<li>Login/Register</li>
<li>Account</li>
<li>Journals</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
<div class="page">
<div class ="main">
<span class="borderhead">Contact Us</span>
<form name="form1" method="post" action="contact.php" id="form1">
<div id="commonText" class="commonText">
<div style="margin-left: 80px">
<table>
<tr>
<td class="commonText"><b>Mail</b></td>
<td class="contactPad"><b>Phone</b> 800-237-6999</td>
</tr>
<tr>
<td class="commonText">8789 San Jose Blvd #305,Mail,</td>
<td class="contactPad"><b>Fax</b> 800-647-1356</td>
</tr>
<tr>
<td class="commonText">Jacksonville, FL 32217</td>
<td class="contactPad">Submit form below.</td>
</tr>
</table>
</div>
All fields that have (<span class="mandatoryStar">*</span>) are mandatory fields.
<br>
<br>
<div style="padding-left: 46px;padding-bottom: 7px">
<span class="mandatoryStar">*</span>Name
<div class="padTxtbox">
<input name="txtName" type="text" id="txtName" class="txtBox" />
<span id="reqName" class="errormsg" style="color:Red;display:none;"></span>
</div>
</div>
<div style="padding-bottom: 8px">
<span class="mandatoryStar">*</span>E-mail Address
<div class="padTxtbox">
<input name="txtEmail" type="text" id="txtEmail" class="txtBox" />
<span id="reqEmail" class="errormsg" style="color:Red;display:none;"></span>
</div>
</div>
<div style="padding-left: 52px;padding-bottom: 6px"> Phone
<div class="padTxtbox">
<input name="txtPhone" type="text" maxlength="14" id="txtPhone" class="txtBox" />
<span id="regPhone" style="color:Red;display:none;"></span>
</div>
</div>
<div style="padding-bottom: 6px;padding-left: 80px">If you would like someone to contact you by phone, please provide the area code
and phone number to be used between 8:00 AM and 5:00 PM EST, Monday through Friday.</div>
<div class="suggest">
<span class="mandatoryStar">*</span> Message
<div class="padTxtbox">
<textarea name="txtMessage" rows="2" cols="20" id="txtMessage" class="multitxtboxLarge"></textarea>
<span id="reqMessage" class="errormsg" style="color:Red;display:none;"></span>
</div>
</div>
<br>
<div style="padding-left: 90px;padding-top: 6px">
<input type="image" name="imbSubmit" id="imbSubmit" src="images/submit.gif" alt="Submit" onclick="contactSubmit()"/>
<img alt="Cancel" src="images/cancel.gif" style="cursor:hand" onclick="ClearFormData()" class ="cancel"/>
</div>
</div>
</form>
</div>

Here is an example of how to do this :
<form>
<label for="textarea">Textarea:</label>
<textarea cols="50" id="title" name="title" rows="4"></textarea>
</form>
And css property :
label, textarea{
display:inline-block;
vertical-align:middle;
}

well you have to add this to your css
textarea{
display:inline-block;
vertical-align:middle;
}
vertical-align:top; or vertical-align:bottom;
and that's all, i hope i helped you :-D