alignment issues when showing the subtext for a label - html - html

I have the below html code,i want to add a subtext(select Dates) for MyCalendar label.
<tr style="height:5%;">
<td colspan="2">
<span style="float:right;"> <label style="float: right">MyCalendar<input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label> </span>
<span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
</td>
</tr>
I tried as below but the alignment is not as expected:
<tr style="height:5%;">
<td colspan="2">
<span style="float:right;"> <label style="float: right;display:block;">MyCalendar: <br /><span> <font size="1">(select Dates) <font size="1"></span><input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label>
</span>
<span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
</td>
</tr>

You may try using :after element like this so you don't have to touch your HTML structure :
span.more label {
position: relative;
}
span.more label:after {
content: "(Select dates)";
position: absolute;
bottom: -10px;
left: 10px;
font-size: 11px;
}
<tr style="height:5%;">
<td colspan="2">
<span class="more" style="float:right;"> <label style="float: right">MyCalendar<input id="t1" class="sid myClassValue" style="float: right" ng-model="myData"></label> </span>
<span style="float:left;"> <a style="text-align: right; float: right; color: #c94e00" target="_blank" href="http://myURL.com">Click on link</a> </span>
</td>
</tr>

Related

how to replace table buttons with divs

I'm trying to convert this table to divs to create a homepage for an online course. Can someone help me style the banner image and buttons in divs instead of a table? Here's the sample code:
<table class="tg" style="width: 785.948px;" cellspacing="2">
<tbody>
<tr>
<th class="tg-baqh" style="width: 726.948px;" colspan="5"><img src="https://canvas.ubc.ca/courses/1755/files/187001/preview" alt="TBLE banner-2.png" width="808" height="166" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/files/187001" data-api-returntype="File" /></th>
</tr>
<tr>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Before We Meet" href="https://canvas.ubc.ca/courses/1755/modules/11024" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11024" data-api-returntype="Module">Link 1</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 135px; height: 21px;" title="Wk 1: Discover" href="https://canvas.ubc.ca/courses/1755/modules/11025" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11025" data-api-returntype="Module">Link 2</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Wk 2: Design" href="https://canvas.ubc.ca/courses/1755/modules/11026" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11026" data-api-returntype="Module">Link 3</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Week 3: Deliver" href="https://canvas.ubc.ca/courses/1755/modules/11027" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027" data-api-returntype="Module">Link 4</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Week 3: Deliver" href="https://canvas.ubc.ca/courses/1755/modules/11027" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027" data-api-returntype="Module">Link 5</a></td>
</tr>
</tbody>
</table>
Just SWAGing your layout with the magic of Flex and CSS.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Test Page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
.tg { width: 785.948px; }
.tg-bagh { width: 726.948px; }
.tg-6k2t { width: 130px; text-align: center; }
a { width: 135px; height: 21px; }
.wrapper {
display: flex;
flex-wrap: wrap;
margin: 0.2em;
padding: 0.2em;
}
.wrapper > div {
border: 2px solid black;
margin: 0.2em;
padding: 0.2em;
}
/*
FileName - styles.css
Description - CSS code for making the image responsive by setting the value of four properties
such as display, margin-left, margin-right, width
Author - Tanu Nanda Prabhu
*/
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
</style>
</head><body>
<div class="tg-baqh center">
<img src="https://canvas.ubc.ca/courses/1755/files/187001/preview"
alt="TBLE banner-2.png"
width="100%" height="166"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/files/187001"
data-api-returntype="File" />
</div>
<div class="wrapper">
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Before We Meet"
href="https://canvas.ubc.ca/courses/1755/modules/11024"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11024"
data-api-returntype="Module">Link 1</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Wk 1: Discover"
href="https://canvas.ubc.ca/courses/1755/modules/11025"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11025"
data-api-returntype="Module">Link 2</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Wk 2: Design"
href="https://canvas.ubc.ca/courses/1755/modules/11026"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11026"
data-api-returntype="Module">Link 3</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Week 3: Deliver"
href="https://canvas.ubc.ca/courses/1755/modules/11027"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027"
data-api-returntype="Module">Link 4</a>
</div>
<div class="tg-6k2t">
<a id="" class="btn btn-small btn-primary"
title="Week 3: Deliver"
href="https://canvas.ubc.ca/courses/1755/modules/11027"
data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027"
data-api-returntype="Module">Link 5</a>
</div>
</div>
</body></html>
Could be made more responsive if you had defined more of your existing CSS
Removed all inline CSS statements for a start.

Position: sticky; not working no matter what

Trying to get a class to remain sticky and constantly be in view when the user scrolls down the page, but doesn't seem to work no matter what.
I tired:
.entry-summary{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;}
But this does nothing.
The full code can be seen below and is part of this webpage https://aqwaa.net/product/constriction/:
<div class="qode-single-product-summary">
<div class="summary entry-summary">
<div class="clearfix">
<h1 class="product_title entry-title">Constriction</h1><p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span></span></p>
<div class="woocommerce-product-details__short-description">
<p><strong>Mental Health Description: </strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>
<form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
<input type="button" value="+" class="plus">
</div>
<button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>
</form>
<div class="product_meta">
<span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>
<span class="posted_in">Category: AQWAA</span>
<span class="tagged_as">Tag: Necklace</span>
</div>
<div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">
<h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Description</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>.woocommerce-product-gallery__image{width: 100% !important;}</style>
</div>
</div>
<h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Additional Information</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<table class="woocommerce-product-attributes shop_attributes">
<tbody><tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">Dimensions</th>
<td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
<th class="woocommerce-product-attributes-item__label">Gold</th>
<td class="woocommerce-product-attributes-item__value"><p>18k Gold</p>
</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
<th class="woocommerce-product-attributes-item__label">Silver</th>
<td class="woocommerce-product-attributes-item__value"><p>.925 Sterling Silver</p>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div><!-- .clearfix -->
</div><!-- .summary -->
</div>
I expect the class .summary.entry-summary to remain visible as the user scrolls down the page, this does not happen.
Based on your code snippet, it looks as though the .entry-summary class belongs to one div, which is a single child element in a container.
The position:sticky can only allow the child to 'float' over sibling elements within the same container.
I copied your code into codepen, and added another blank <div> in your <div class="qode-single-product-summary"> to take up some vertical space and provide a sibling element, and it appears to be working just fine.
(Look for my comments "I added this" towards the bottom of your code)
Also if you run the snippet I provided, you should see the sticky property working until approximately half way down when the dummy div I added ends...
.entry-summary {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
/* i added this */
#spacefill {
height: 10000px;
}
<div class="qode-single-product-summary">
<div class="summary entry-summary">
<div class="clearfix">
<h1 class="product_title entry-title">Constriction</h1>
<p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span>
</span>
</p>
<div class="woocommerce-product-details__short-description">
<p><strong>Mental Health Description: </strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress
which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>
<form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
<input type="button" value="+" class="plus">
</div>
<button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>
</form>
<div class="product_meta">
<span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>
<span class="posted_in">Category: AQWAA</span>
<span class="tagged_as">Tag: Necklace</span>
</div>
<div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">
<h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Description</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>
.woocommerce-product-gallery__image {
width: 100% !important;
}
</style>
</div>
</div>
<h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Additional Information</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<table class="woocommerce-product-attributes shop_attributes">
<tbody>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">Dimensions</th>
<td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
<th class="woocommerce-product-attributes-item__label">Gold</th>
<td class="woocommerce-product-attributes-item__value">
<p>18k Gold</p>
</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
<th class="woocommerce-product-attributes-item__label">Silver</th>
<td class="woocommerce-product-attributes-item__value">
<p>.925 Sterling Silver</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="spacefill">
</div>
</div>
<!-- .clearfix -->
</div>
<!-- .summary -->
<div id="spacefill">
<!-- I added this -->
</div>
</div>
Here's the solution that worked best for me. You can see the final result on the webpage. Involves using position:fixed and some nifty z-index cheats.
.woocommerce-product-gallery__image{width: 100% !important;}
#media all and (min-width:1000px) {
.qode-single-product-summary {
position: fixed;
z-index: 110;
right: 113px;
width: 40%;
}
.woocommerce .summary {
float: right;
width: 100%;
margin-bottom: 45px;
}
.woocommerce ul.products {
background: #fff;
z-index: 999999999999999999999;
position: relative;
display: table;
}
.qode-single-product-summary {
position: fixed;
z-index: 110;
right: 113px;
width: 40%;
}
.woocommerce .summary {
float: right;
width: 100%;
margin-bottom: 45px;
}
.woocommerce ul.products {
background: #fff;
z-index: 999999999999999999999;
position: relative;
display: table;
margin: 0 0 0px;
}
.content_bottom {
padding-top: 80px;
background: #fff;
}
.woocommerce-page .content .container .container_inner {
padding-bottom: 0!important;
}
h2.qode-related-upsells-title {
z-index: 99999999999;
background: #fff;
padding-top: 0!important;
display: table;
position: relative;
width: 100%;
margin-bottom: 0!important;
padding-bottom: 34px;
}
}
#media all and (min-width:1500px) {
.qode-single-product-summary {
width: 1300px; right:initial;
}
.woocommerce .summary {
width: 500px;
}
}

How to insert a div between two divs?

I have two small divs at the two left and right corners of my page. There is a lot of space between them. I want to occupy all that space with another div.
Here is the CSS code:
.signatureBox{
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: rgb(128, 128, 128);
min-width: 200px;
min-height: 65px;
padding: 3px;
display: block;'
}
and the HTML code:
<div class='signatureContainer'>
<span class='signatureBox' style='float: left;' >
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: left'>
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: right'>
<span> </span>
<hr style='margin-top: 70px;' />
<span> Master </span>
</span>
</div>
If you are trying to remove the space between them, you should simply set float to left on every one of them.
<div class='signatureContainer'>
<span class='signatureBox' style='float: left;' >
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: left'>
<span>employee</span>
<hr style='margin-top: 70px;' />
<span>Role</span>
</span>
<span class='signatureBox' style='float: left'>
<span> </span>
<hr style='margin-top: 70px;' />
<span> Master </span>
</span>

Alignment of span elements as td in table

How to make the span elements to be in a ordered manner as in table column ?
i.e how to make step, glyphicons and X to be aligned same as in table
(eg:glyphicons are moved up if we use span)
Html
<div class="row moving">
<div class="col-md-12">
<span class="col-md-1"><h4>Step</h4></span>
<span class="col-md-8"><textarea class="form-control"></textarea></span>
<span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></span>
<span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></span>
<span class="col-md-1"><span>X</span></span>
</div>
</div>
</br>
<table>
<tr>
<td class="col-md-1"><h4>Step</h4></td>
<td class="col-md-8"><textarea class="form-control"></textarea></td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></td>
<td class="col-md-1"><span>X</span></td>
</tr>
</table>
CSS
.moving{
margin-top:10px;
}
textarea{
resize:none;
}
Here is a fiddle
You can make use of CSS3 flexible box for your alignment. align-items: center will align the elements inside the flexible box container to be in the center of cross-axis(vertical-plane).
JSfiddle demo
.moving {
margin-top: 10px;
}
textarea {
resize: none;
}
.moving .centered-vertically {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row moving">
<div class="col-md-12 centered-vertically"> <span class="col-md-1"><h4>Step</h4></span>
<span class="col-md-8"><textarea class="form-control"></textarea></span>
<span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span></span> <span class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span></span> <span class="col-md-1"><span>X</span></span>
</div>
</div>
</br>
<table>
<tr>
<td class="col-md-1">
<h4>Step</h4>
</td>
<td class="col-md-8">
<textarea class="form-control"></textarea>
</td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-down"></span>
</td>
<td class="col-md-1"><span class="glyphicon glyphicon-circle-arrow-up"></span>
</td>
<td class="col-md-1"><span>X</span>
</td>
</tr>
</table>

3 side by side boxes, toggle which ones show by dropdownlist

http://jsfiddle.net/rnmk0zhz/5/
My JSFiddle is above
I have 3 drop down boxes, and below them are three divs which are hidden. When 'no' is selected I want the box directly under it to show.
I dont want it to always show on the left. I want the middle box under the middle dropdown list if no is selected in the middle, the other two to hide unless one of those are selected also. If the user selects 'no' in two boxes then I want two boxes to show.
I've tried floating them, but the padding is off when one hides and one shows. Absolute position wont work because there are rows of these and they'll overlap.
I hope I'm clear on what I'm trying to do here.
<table style="padding-left: 56px; padding-top: 3px;">
<tr>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl1">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl2">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl3">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
</tr>
</table>
<div style="padding-left: 56px;" class="">
<div class="box1" style="display:inline-block; height: 150px; width: 415px;">
<span>box1</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box2" style="display: inline-block; height: 150px; width: 409px;">
<span>box2</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box3" style="display:inline-block; height: 150px; width: 409px;">
<span>box3</span>
<br/><br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
</div>
I think you can simplify it to this using jquery toggle:
$("[class^='box'").hide();
$("#ddl1").on("change", function() {
$('.box1').toggle($(":selected", this).text() == "no");
});
$("#ddl2").on("change", function() {
$('.box2').toggle($(":selected", this).text() == "no");
});
$("#ddl3").on("change", function() {
$('.box3').toggle($(":selected", this).text() == "no");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="padding-left: 56px; padding-top: 3px;">
<tr>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl1">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl2">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl3">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
</tr>
</table>
<div style="padding-left: 56px;" class="">
<div class="box1" style="display:inline-block; height: 150px; width: 415px;"> <span>box1</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box2" style="display: inline-block; height: 150px; width: 409px;"> <span>box2</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box3" style="display:inline-block; height: 150px; width: 409px;"> <span>box3</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
</div>
After your comment about the position of the boxes i suggest to use visibility: hidden instead of display: none:
$("[class^='box'").css("visibility", "hidden");
$("#ddl1").on("change", function() {
$(":selected", this).text() == "no" ? $('.box1').css('visibility', 'visible') : $('.box1').css('visibility', 'hidden');
});
$("#ddl2").on("change", function() {
$(":selected", this).text() == "no" ? $('.box2').css('visibility', 'visible') : $('.box2').css('visibility', 'hidden');
});
$("#ddl3").on("change", function() {
$(":selected", this).text() == "no" ? $('.box3').css('visibility', 'visible') : $('.box3').css('visibility', 'hidden');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="padding-left: 56px; padding-top: 3px;">
<tr>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl1">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl2">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
<td style="width: 421px;">
<div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
<select id="ddl3">
<option>yes</option>
<option>no</option>
</select>
</div>
</td>
</tr>
</table>
<div style="padding-left: 56px;" class="">
<div class="box1" style="display:inline-block; height: 150px; width: 415px;"> <span>box1</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box2" style="display: inline-block; height: 150px; width: 409px;"> <span>box2</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
<div class="box3" style="display:inline-block; height: 150px; width: 409px;"> <span>box3</span>
<br/>
<br/>
<textarea style="height: 149px; width: 328px;"></textarea>
</div>
</div>
Updating the answer after the change
Give a class say .box to the boxes and float it so that they are in one line. Also I have set width to the boxes as well as textarea giving !important. You should remove the inline widths of the textarea and the boxes and then remove this !important
.box {
width: 25% !important;
float: left;
margin-left: 5%;
}
.box textarea {
width: 100% !important;
}
See fiddle
try the below sample, hope this will help you
.box1, .box2, .box3{
visibility: hidden;
}
#wrapper{
width:95%;
overflow:auto;
}
Fiddle Demo