bootstrap affix floats all the way to the left when scroll - html

I have a div within a container that I would like to stay fixed on the right side of the screen. But when the user start to scrolls it just shifts all the way to the left. Thanks for any help.
http://jsfiddle.net/kbLak/
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet">
recent things:
</div>
</div>
</div>
<div class="explore_recentAlbums" data-spy="affix" data-offset-top="20">
<div class="ex_recentBar">
<div class="ex_titleDetails">
<span>recent stuff: </span>
</div>
</div>
<table>
<tr>
<td>
<div class="well well-small" style="margin-bottom: 1px;">
<span>Recent</span>
</div>
<span class="NoDataFound">No Photo.</span>
<div class="smallalbumcover">
<div class="mosaic-blocksmall mofade">
<div class="mosaic-overlay">
<div class="details">
<p>
xzxz
</p>
</div>
</div>
<div class="mosaic-backdrop">
<img src=""/>
</div>
</div>
<div class="clearfix">
</div>
</div>
<div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
<a style="text-decoration: none;" href="/pics"><span class="label label-info">View More</span></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="well well-small" style="margin-bottom: 1px;">
<span>Recent Video Albums</span>
</div>
<span class="NoDataFound">No Video.</span>
<div class="smallalbumcover">
<div class="mosaic-blocksmall mofade">
<div class="mosaic-overlay">
<div class="details">
<p>
test
</p>
</div>
</div>
<div class="mosaic-backdrop">
<img src="#"/>
</div>
</div>
<div class="clearfix">
</div>
</div>
<div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
<a style="text-decoration: none;" href="/vids"><span class="label label-info">View More</span></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="well well-small" style="margin-bottom: 1px;">
<span>Recent P</span>
</div>
<span class="NoDataFound">No.</span>
<div class="smallalbumcover">
<div class="mosaic-blocksmall mofade">
<div class="mosaic-overlay">
<div class="details">
<p>
test
</p>
</div>
</div>
<div class="mosaic-backdrop">
<img src=""/>
</div>
</div>
<div class="clearfix">
</div>
</div>
<div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
<a style="text-decoration: none;" href="/aio"><span class="label label-info">View More</span></a>
</div>
</td>
</tr>
</table>
</div>
​


Add this to your css and it will stay to the right:
.explore_recentAlbums {
right: 0;
}

Related

need help finding which div element.style is attributed to

I'm working in a SaaS program that allows you to enter a custom CSS file with some html as well. That means I can't remove anything from their code, just override it. I've found an element.style in their code but I can't tell how to override it because I can't find a div or class that it goes with. The line in question is <div style="margin:5px; width:140px; height:20px; float:right;" align="right">. I want to change width: 140px to 200px
<div class="boxcontent">
<div style="width:100%; height:42px;">
<div style="margin:5px; width:400px; height:30px; float:left;">
<div class="dashboard_dropdown_btn" id="metric_drop_0">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_0">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_1" style=
"display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_1">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_2" style=
"display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_2">Ideas</span>
</div>
</div>
<div class="dashboard_edit_div">
Edit
</div>
</div>
<div style="margin:5px; width:140px; height:20px; float:right;" align="right">
<div style="float:left; margin-right:5px; line-height:20px;">
View by:
</div>
<div onclick="selectView('d');" class="select_icon" id="select_day" style=
"float:left;" rel="on" title="Day"></div>
<div onclick="selectView('w');" class="select_icon" id="select_week" style=
"float:left;" title="Week"></div>
<div onclick="selectView('m');" class="select_icon" id="select_month" style=
"float:left;" title="Month"></div>
</div>

.boxcontent>div>div:nth-child(2) {
background-color: red;
width: 200px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxcontent">
<div style="width:100%; height:42px;">
<div style="margin:5px; width:400px; height:30px; float:left;">
<div class="dashboard_dropdown_btn" id="metric_drop_0">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_0">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_1" style="display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_1">Ideas</span>
</div>
</div>
<div class="dashboard_dropdown_btn" id="metric_drop_2" style="display:none; margin-left:5px;">
<div class="color_image">
</div>
<div class="text">
<span id="metric_type_2">Ideas</span>
</div>
</div>
<div class="dashboard_edit_div">
Edit
</div>
</div>
<div style="margin:5px; width:140px; height:20px; float:right;" align="right">
<div style="float:left; margin-right:5px; line-height:20px;">
View by:
</div>
<div onclick="selectView('d');" class="select_icon" id="select_day" style="float:left;" rel="on" title="Day"></div>
<div onclick="selectView('w');" class="select_icon" id="select_week" style="float:left;" title="Week"></div>
<div onclick="selectView('m');" class="select_icon" id="select_month" style="float:left;" title="Month"></div>
</div>
</div>
</div>

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 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

Margin property doesn't work

I am using a semantic-ui framework. I am trying to make a post-comments like structure. currently my code looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<title>Assignments</title>
<style>
.items {
width: 70%;
border: solid;
margin: 100px;
}
</style>
</head>
<body>
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="description">
<p>First Post Ever In My Life</p>
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="description">
<p>First Post Ever In My Life</p>
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
</body>
</html>
As you can see I have made items width 70% and margin auto but it doesn't center. Can someone suggest me why?

Give a specific id to parent of such item and give
text-align: center;
styling to it
Let me know if you require further help

<div>'s not appearing in a 'stack'

Sorry if this has been asked, but nothing I found worked in my case.
Here is my current code. I have included more detailed problems there, but basically some of my elements are either not appearing or appearing in unwanted locations.
https://jsfiddle.net/9e8tffh5/2/
<div class="chat">
<div class="bar">
<div class="title">
<span class="name">Random Chat</span>
</div>
</div>
<div class="options">
</div>
<div class="room">
<div class="post other" id="1">
<div class="content">
<span class="note">Hi there!</span>
</div>
<div class="details">
<div class="poster">
<span class="name">Bob</span>
</div>
<div class="time">
<span class="time">9:32</span>
</div>
</div>
</div>
<div class="post self" id="2">
<div class="content">
<span class="note">Hi Bob</span>
</div>
<div class="details">
<div class="time">
<span class="time">12:32</span>
</div>
</div>
</div>
<div class="post self" id="3">
<div class="content">
<span class="note">How are you doing?</span>
</div>
<div class="details">
<div class="time">
<span class="time">9:33</span>
</div>
</div>
</div>
<div class="post other" id="4">
<div class="content">
<span class="note">Great!</span>
</div>
<div class="details">
<div class="poster">
<span class="name">Bob</span>
</div>
<div class="time">
<span class="time">9:32</span>
</div>
</div>
</div>
</div>
<div class="message">
<div class="input">
<input type="text" placeholder="Send a message" />
</div>
</div>
</div>

fiddle
.chat .room .self {
/* position: absolute;
right: 8px; */
text-align: right;
}
.chat .room .self .details {
/* position: absolute;
right: 8px; */
text-align: right;
}