CSS line up DIV TABLE to stack when longer than width - html

Hey all I am trying to find the correct code in order for the input thats within the DIV TABLE to go to the next line if it's too long to display on one line:
The JSFIDDLE is here
The HTML code:
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-2 text-right" style="width: 100%;">
<div class="panel panel-default">
<div class="panel-heading" align="left">
<h4>Accident Information:</h4>
</div>
<div class="panel-body">
<div class="Table">
<div class="Row">
<div class="Cell" align="right">
Date of Accident:
</div>
<div class="Cell" align="left">
{AI_DATEOF}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Type of Accident:
</div>
<div class="Cell" align="left">
{AI_ACCIDENT}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Accident Location:
</div>
<div class="Cell" align="left">
{AI_LOCATION}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Accident Details:
</div>
<div class="Cell" align="left">
{AI_DETAILS}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
List Of Other Family Members
<br/> That Were Involved:
</div>
<div class="Row" style="width:100%;display:table;">
<!--Details 1 -->
<div class="Cell" align="left" style="width:50%; display: table-cell;">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


Instead of making your own CSS, if you're using Bootstrap, why don't you change the class of cell to col-sm-2 or so on?

Related

Element goes outside parrent

I'm having a little problem with my CSS.
If you run the fiddle (had to use fiddle because of StackOverflow body limit), and look at the grey background of CASES.
Then you can see that all the content of Cases is nicely inside it the grey area. But if you click on Casefamily then you will notice that the Casefamily goes outside the grey area. This covers parts of my documentation section.
How can I make the "grey" area expand to its content?
<div id="pvCases_d30dcf2a">
<div class="Cases_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="Controllers_d30dcf2a">
<input class="search_d30dcf2a" placeholder="Search..">
<div class="catchWordContainer_d30dcf2a">
<input class="catchWord_d30dcf2a" placeholder="Catchword">
<div class="catchWordSuggestion_d30dcf2a"></div>
</div>
<div class="dropdown_d30dcf2a">
<div class="selected_d30dcf2a">
<span> Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
</div>
<div class="options_d30dcf2a" style="display: none;">
</div>
</div>
<div class="rightContainer_d30dcf2a">
<button type="button" id="SaveSearchResult">Save</button>
<div class="SearchCollection_d30dcf2a">
<div class="selected_d30dcf2a">
<span> </span><i class="fa fa-caret-down"></i>
</div>
<div class="SearchCollectionOptions_d30dcf2a">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="CaseTable_d30dcf2a">
<table class="table table-striped">
<thead>
<tr>
<th><span>Case Title</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Case Number</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Status</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Case Type</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Family</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Country</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Catchword</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Inventor</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Description</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Classes</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Appl. Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Reg Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Abandoned Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="option_container_d30dcf2a">
<i class="fa fa-cog cog_d30dcf2a"></i>
<div class="cog_options_d30dcf2a">
<div class="row"></div>
<button class="SettingTableOptions_d30dcf2a">Save</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr data-content="{"Id":1,"Title":"Feed for salmonids","Case_Number":"P47931PC01","Status":"Filed","Case_Type":"Parent","Family":"Test","Country":"Denmark","Catchword":"Web","Applicant_x002f_Proprietor":"P47931PC01","Inventor":"Konfab","Description":"<div class=\"ExternalClass4AF54D6F770C4D72987907C1A07DEA48\"><p>​Something<br><br></p></div>","Classes":"dunno","Appl_x002e_Date":"2018-06-21T22:00:00Z","RegDate":"2018-06-21T22:00:00Z","Abandoneddate":null,"Picture":null,"ID":1}">
<td>Feed for salmonids</td>
<td>P47931PC01</td>
<td>Filed</td>
<td class="defaultHidden_d30dcf2a">Parent</td>
<td class="defaultHidden_d30dcf2a">Test</td>
<td class="defaultHidden_d30dcf2a">Denmark</td>
<td>Web</td>
<td>P47931PC01</td>
<td class="defaultHidden_d30dcf2a">Konfab</td>
<td class="defaultHidden_d30dcf2a">
<div class="ExternalClass4AF54D6F770C4D72987907C1A07DEA48">
<p>​Something<br><br></p>
</div>
</td>
<td class="defaultHidden_d30dcf2a">dunno</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">null</td>
<td></td>
</tr>
<tr data-content="{"Id":2,"Title":"case test","Case_Number":"P47931PC02","Status":"Filed","Case_Type":"Parent","Family":"Test","Country":"Denmark","Catchword":"Web","Applicant_x002f_Proprietor":"P47931PC02","Inventor":"Konfab","Description":"<div class=\"ExternalClass3E913664A3344C909C30924BD9212012\"><p>​Something​<br></p></div>","Classes":"dunno","Appl_x002e_Date":"2018-06-21T22:00:00Z","RegDate":"2018-06-21T22:00:00Z","Abandoneddate":null,"Picture":null,"ID":2}">
<td>case test</td>
<td>P47931PC02</td>
<td>Filed</td>
<td class="defaultHidden_d30dcf2a">Parent</td>
<td class="defaultHidden_d30dcf2a">Test</td>
<td class="defaultHidden_d30dcf2a">Denmark</td>
<td>Web</td>
<td>P47931PC02</td>
<td class="defaultHidden_d30dcf2a">Konfab</td>
<td class="defaultHidden_d30dcf2a">
<div class="ExternalClass3E913664A3344C909C30924BD9212012">
<p>​Something​<br></p>
</div>
</td>
<td class="defaultHidden_d30dcf2a">dunno</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">null</td>
<td></td>
</tr>
</tbody>
</table>
<button type="button" class="download_xlsx_d30dcf2a">download as xlsx</button>
</div>
</div>
</div>
</div>
<div class="CaseDetails_d30dcf2a" style="display: block;">
<div class="return_d30dcf2a">
<span> Cases / </span><span>Feed for salmonids</span>
</div>
<div class="CaseDetailContainer_d30dcf2a">
<ul class="tabs_d30dcf2a group">
<li><a class="active_d30dcf2a">Case details</a></li>
<li><a class="">Casefamily</a></li>
</ul>
<div class="box_wrap_d30dcf2a">
<div class="active_d30dcf2a">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Case Number</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">P47931PC01</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Status</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Filed</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Type</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Parent</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Family</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Test</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Country</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Denmark</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Title</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Feed for salmonids</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Applicant/Proprietor</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">P47931PC01</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Inventor</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Konfab</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Description</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">​Something</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Classes</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">dunno</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Appl. date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">21-06-2018</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Reg. Date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">21-06-2018</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Next Renewal</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Abandoned date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Division (subdivision)</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
</div>
</div>
<div class="col-md-3">
<img>
</div>
</div>
</div>
<div class="Casefamily_d30dcf2a">
<table class="table">
<thead>
<tr>
<th>
Case No
</th>
<th>
Name
</th>
<th>
Applicant/Proprietor
</th>
<th>
Appl. date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr class="status_d30dcf2a Filled_d30dcf2a">
<td>
T62039EU02
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Filed
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU03
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Pending_d30dcf2a">
<td>
T62039EU04
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Pending
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU05
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU06
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU07
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

replace position: absolute with position: relative, it will expand parent element
#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a .box_wrap_d30dcf2a>div {
position: relative;
}

Hello Peter it doesn't respect the parent because it is a table, and tables are not responsive. The best solution is to make the parent div to have a CSS attribute of overflow-x : scroll, to enable people to view all the content and to contain you content.
#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a
.box_wrap_d30dcf2a>div{
overflow-x : scroll;
}

how to align columns vertically so that adjacent rows not align with each other

How can I align the td vertically so that it looks like below and the text box will be next to the "aaaa:" and aligned with it horizontally as well?
https://jsfiddle.net/rgw870ta/
enter code here

Please check the following code and its output, I'm a bit confused what you actually want but I guess one of following will help you!
<table style="width: 100%;display:table-cell;" border="0">
<tr valign="top" >
<td style="width: 50px" align="right">And<br /> And</td>
<td style="display:block; margin-left:10px; margin-bottom:70px">
aaaaaaaaaaaaaaaaaaaaa:
<br />
bbbbbbbbbbbbbbbbbb
<br />
cccccccccccccccccccc
</td>
<td>
<table border="0">
<tr>
<td>
<input type="text" name="lname">
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<br>
<div style="display: flex;align-items: center;
">
<div style="width: 50px" align="right">And<br /> And</div>
<div style="display:block; margin-left:20px;">
aaaaaaaaaaaaaaaaaaaaa:
<br />
bbbbbbbbbbbbbbbbbb
<br />
cccccccccccccccccccc
</div>
<div>
<input type="text" name="lname">
</div>
</div>

Try this
<table style="width: 70%" border="0">
<tr valign="top" >
<td style="width:10px">And<br /> And</td>
<td style="width:20px;text-align:left; ">
aaaaaaaaaaaaaaaaaaaaa:
<br />
bbbbbbbbbbbbbbbbbb
<br />
cccccccccccccccccccc
</td>
<td style="width:70px;text-align:left;">
<input type="text" name="lname">
</td>
</tr>
</table>

Try this and see if that's what you're after... I think you missed the div with class container wrapping all the rows.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row top-buffer">
<div class="col-md-12">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA:</div>
</div>
<div class="row no-margin">
<div class="col-md-2"></div>
<div class="col-md-5 ">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB:</div>
<input style="margin-top:-5px" type="text" />
</div>
<div class="row no-margin">
<div class="col-md-2 text-right">And</div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
<div class="row no-margin">
<div class="col-md-2"></div>
<div class="col-md-5">CCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</div>
<div class="row no-margin">
<div class="col-6 col-md-2 text-right">And</div>
<div class="col-6 col-md-2"></div>
<div class="col-6 col-md-2"></div>
</div>
<div class="row no-margin">
<div class="col-md-2"></div>
<div class="col-md-4">DDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
</div>
</div>

i assume this is what you need:
<div class="container">
<div class="row">
<div class="col-sm-4">
<label>A</label>
</div>
<div class="col-sm-4 col-xs-4">
<div class="col-xs-2">
<input type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label>A </label>
</div>
<div class="col-sm-4 col-xs-4 ">
<div class="col-xs-2">
<input type="text">
</div>
</div>
</div>
</div>
resize the uotput window check:
https://jsfiddle.net/3q3egbqs/

How to dynamically add a page break if printing reaches a second page

I'm having an issue with my HTML product sheet.
When there are enough products selected on the page to amount to a second page, the top of the second page gets smudged with the new product that has its styling all messed up.
CSS i've tried this far
#media print{
#packingPrint {
page-break-after: always;
}
}
div that contains the information needing to be printed.
<div style="page-break-after: always;">
<!--END: pagebreak-->
<section id="packingPrint" style="font-family:verdana,helvetica,sans-serif" ;>
<!------ START: Confirmation ------>
<!--START: order_details-->
<div class="customerInfoBlock" style="border-bottom: solid;border-width: 1px;">
<!--start customer info block-->
<div class="left-col">
<!--START: invoicelogo-->
<div class="invoice-logo"><img src="../[invoicelogo]" alt="[company]" /></div>
<!--END: invoicelogo-->
</div>
<!--end customer info block-->
<!--start invoice info block-->
<div class="right-col">
<div class="orderNumber">
<div class="label">Order Number #:</div>
<div class="text">[invoicenum_prefix][invoicenum]
<!--START: shipmentsuffix--><span style="display:none;">-[shipment_suffix]</span>
<!--END: shipmentsuffix-->
</div>
<div class="clear"></div>
<div class="label">Order Date:</div>
<div class="text">[odate_month]/[odate_day]/[odate_year]</div>
<div class="clear"></div>
</div>
</div>
<!--end invoice info block-->
<div class="clear"></div>
</div>
<div class="billingBlock">
<!--start billing block-->
<div class="left-col">
<p style="font-size:20px; text-decoration: underline;"><strong>SHIPPING ADDRESS</strong></p>
<p style="font-size:18px">[oshipzip]</p>
<div class="spacer"></div>
<p style="font-size:18px">[oshipfirstname] [oshiplastname]</p>
<!--START: oshipcompany-->
<p style="font-size:18px">[oshipcompany]</p>
<!--END: oshipcompany-->
<p style="font-size:18px">[oshipaddress]</p>
<!--START: oshipaddress2-->
<p style="font-size:18px">[oshipaddress2]</p>
<!--END: oshipaddress2-->
<p style="font-size:18px">[oshipcity]</p>
</div>
<!--end billing block-->
<!--start shipping block-->
<div class="right-col" style="max-width: 300px">
<div class="deliveryBox">
<div class="text"><span style="color: #ff0000;"><img src="/assets/images/shipping1.png" width="40" height="40" style="padding-right:5px; margin-bottom: -10px;">[oshipmethod]</span> </div>
</div>
<div class="spacer1">
<div class="text"><img src="/assets/images/Weight1.png" width="25" height="25" style="padding-right:5px;">Weight:[totalweight]kgs</div>
</div>
<div class="spacer1">
<div class="text">
<p style="font-size:15px"> <img src="/assets/images/email1.png" width="25" height="25" style="padding-right:5px;">[oemail]</p>
</div>
</div>
<div class="spacer1">
<div class="text">
<p style="font-size:15px"><img src="/assets/images/phone1.png" width="25" height="25" style="padding-right:5px;">[ophone]</p>
</div>
</div>
<div class="clear"></div>
</div>
<!--end shipping block-->
<div class="clear"></div>
</div>
<div class="shippingInfoBlock" style="width:100%;">
<!--START: shipping_info-->
<div class="invoiceTable">
<div class="titles2" style="padding-top: 15px;padding-bottom: 15px;">
<div class="invoice-qty">Qty</div>
<div class="invoice-loc">Loc</div>
<div class="invoice-items">Items</div>
<div class="invoice-ais">2loc</div>
<div class="invoice-cus">Stock</div>
<div class="invoice-id">Item ID</div>
<div class="clear"></div>
</div>
<!--START: items-->
<div class="row" style="border-bottom: solid;border-width: 1px;padding-top: 15px;padding-bottom: 15px;">
<div class="invoice-qty">[numitems]</div>
<div class="invoice-loc">[warehouse_location]</div>
<div class="invoice-items">[itemname]</div>
<!--START: warehouse_location-->
<div class="invoice-ais" style="text-align:center;">[warehouse_aisle]</div>
<div class="invoice-cus" style="text-align:center;">[warehouse_custom]</div>
<div class="invoice-id" style="text-align:center;">[id]</div>
<div class="clear"></div>
<!--END: warehouse_location-->
</div>
</div>
<!--END: items-->
<div class="orderDetailsBlock">
<div class="left-col">
<!--START: ocomment-->
<div class="ocomment" >
<strong>Order Comments:</strong>
<p class="oCommenting"><strong><span class="commentsOrder" style="color: #ff0000;">[ocomment]</span></strong></p>
</div>
<!--END: ocomment-->
</div>
</div>
<div class="clear"></div>
</div>
<p id="imagePick"><img src="https://www.plasticpipeshop.co.uk/assets/images/Picked.png" alt="Picked By" align="right" width="250" height="150" /> </p>
<!------ END: Confirmation ------>
<div class="clear"></div>
</section>
</div>
Picture of the issue showing the top of the second, and bottom of the first

How to keep image size correct in different resolutions, in Bootstrap?

I am working on a website, in which I need to create four columns of equal width. On top of columns, I need to place an image. Following is my code:
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="row" style="margin-bottom:30px;">
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/one.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">First column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/two.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Second column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/three.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Third column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/four.jpg" />
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Fourth column title</div>
</div>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>
How can I place an image properly above column, image width equal to column width, without creating multiple size images?

Please find the code that works. I just added "img-responsive" class that is bootstrap in build class to all the image tags.
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<div class="row" style="margin-bottom:30px;">
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/one.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">First column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/two.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Second column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/three.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Third column title</div>
</div>
</div>
<div class="col-xs-3">
<div class="row" style="width:100%;height:auto;">
<img src="images/small/four.jpg" class="img-responsive"/>
</div>
<div class="row" style="height:200px;">
<div class="col-xs-12">Fourth column title</div>
</div>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>

Rowspan and heigth top column in bootstrap

How can I do in bootstrap such a grid:
<table border=1>
<tr>
<td style="height: 30px">aaaa</td><td rowspan="2">bbbb</td>
</tr>
<tr>
<td style="font-size: 9px">cccccccc</td>
</tr>
</table>
https://jsfiddle.net/68anykfe/1/
Is this possible?
I tried:
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-12" style="height: 60px">aaaaa</div>
</div>
<div class="row">
<div class="col-lg-12">ccccc</div>
</div>
</div>
<div class="col-lg-3">
bbbbb
</div>
</div>
</div>
In this example i would like "bbbbbb" have aligned to bottom.

I think this is what you are asking for? https://jsfiddle.net/eye4ytq2/8/
<div class="col-xs-2 border">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 border" style="height: 60px">aaaaa</div>
<div class="col-xs-12 border">ccccc</div>
</div>
</div>
<div class="col-xs-6 border" style="height: 81px">
bbbbb
</div>
</div>
</div>