stylesheet.css query - news box layout

[shags38]

v1.5.7b php7.3

My ability with stylesheets is limited and I'm struggling with being able to modify stylesheet layout for the recently installed news_box_manager. Looking at my site dazzlerscliponearrings.com.au the news box is displaying after main page content and is included in the centerbox wrapper which is adopting the mainwrapper width of 100% - two articles are configured to show and they are showing side by side and 'contorted'.

I would like the news box table to flow with the mainpage content column width ..... however I want to keep the flexible footer menu, also part of the centerwrapper, at full screen width.

The specific stylesheet_news_box_manager.css only allows for the actual table width to be adjusted and doesn't control what I want to do (as far as I can tell).

Any help will be appreciated. (p.s. I had to post only part of the stylesheet.css but hopefully have included what is needed - too many characters in post to submit )

cheers,
Mike

stylesheet.css

/**
 * Main CSS Stylesheet
 *
 * @copyright Copyright 2003-2020 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: DrByte 2020 Sep 20 Modified in v1.5.7a $
 */

/*bof basic elements*/
body {margin:0;font-family:arial, verdana, helvetica, sans-serif;font-size:72.5%;line-height:140%;}
/*general link styles*/
a img {border:none;}
a:link, #navEZPagesTOC ul li a 
a:visited {text-decoration:underline;}
.sideBoxContent a:visited{}
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover{}
a:active {}
/*heading styles*/
h1 {font-size:1.8em;line-height:25px;}
h2 {font-size:1.4em;}
h3 {font-size:1.3em;}
h4, h5, h6, h4.optionName, LEGEND, ADDRESS, .larger{font-size:1.1em;}
h1, h2, h3, h4, h5, h6 {margin:20px 0;}
.biggerText {font-size:1.2em;line-height:160%;}
P, ADDRESS {padding:0.5em;}
ADDRESS {font-style:normal;}
HR {height: 1px;margin-top:0.5em;border:none;}
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float:left;}
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {text-align:center;}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {margin:0.5em;}
/*floats and clears*/
.back {float:left;}
.forward, #shoppingCartDefault #PPECbutton {float:right;}
.clearBoth {clear:both;}
.bold {font-weight:bold;}
.hiddenField {display:none;}
.visibleField {display:inline;}
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {vertical-align:top;}
.alert {margin-left:0.5em;}
.important {font-weight:bold;}
.gvBal {float:right;}
.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {padding:0.8em;}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {font-size:0.9em;}
.information {padding: 10px 3px; line-height: 150%;}
.group:after {content: "";display:table;clear:both;}
/*blue text color change to your color*/
.blue{}
.blue:hover{}
.last{border:none !important;}
.no-fouc {display: none;}
.italic{font-style:italic;}
.back-margin{margin-top:30px;}
.onerow-fluid{width:75% !important;margin:auto;}

/*bof form elements*/
CODE {font-family:arial, verdana, helvetica, sans-serif;font-size:1em;}
FORM, SELECT, INPUT {display:inline;font-size:1em;margin:0 0.1em 0 0;}
input{height:35px;padding-left:5px;margin-bottom:10px;}
select{border:none;padding-left:5px;width:51%;}
TEXTAREA {margin:auto;display:block;width:66%;}
input:focus, select:focus, textarea:focus {}
legend{padding:0;display:table;text-align:center;width:100%;padding:10px 0;font-size:1.3em;}
fieldset{border:0;padding:0.01em 0 0 0;padding-bottom:20px;padding-top:20px;margin:0;min-width:0;margin-bottom:20px;}
body:not(:-moz-handler-blocked) fieldset{display:table-cell;}
fieldset > fieldset{}
fieldset fieldset legend{text-align:left;padding:0;margin:0;position:relative;left:20px;font-size:120%;display:table;background:none;}
fieldset p{margin-left:20px;}
fieldset label, fieldset .inputLabel, fieldset h3, fieldset address, #advSearchDefault input, fieldset .buttonRow.back, fieldset select, fieldset input[type=radio], fieldset input[type=checkbox], fieldset div{margin-left:20px;}
fieldset div, fieldset .buttonRow.forward{margin-right:20px;}
option{font-size:110%;}
LABEL, h4.optionName {line-height:1.5em;padding:0.2em;}
LABEL.checkboxLabel, LABEL.radioButtonLabel {margin:0.5em 0.3em;}
LABEL.inputLabel {width:11em;float:left;}
LABEL.inputLabelPayment {width:15em;float:left;}
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {width:12em;float:left;}
LABEL#textAreaReviews {font-weight:normal;margin:1em 0;}
input[type=text]{width:50%;}
#password-current, #login-password, #password-new, #password-confirm{width:50%;}
input[type=radio], input[type=checkbox]{margin-top:8px;vertical-align:middle;height:auto;}
input[type=file], input[type=image]{border:none;width:auto;height:auto;}
input[type=tel], input[type=email], input[type=password]{width:50%;}
select#country, .wrapperAttribsOptions select, #advSearchDefault select, select#stateZone {height:40px;}
select#country, select#stateZone, #state {margin-left:0;}
.ccinfo select{width:auto;height:25px;margin-bottom:10px;}
.sideBoxContent select{width:auto;}
#currenciesContent select{height:35px;}

/*bof warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {line-height:1.8em;padding:20px;}
.messageStackWarning, .messageStackError {}
.messageStackSuccess {}
.messageStackCaution {}

/*bof wrappers - page or section containers*/
#mainWrapper {text-align:left;width:100%;vertical-align:top;}
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage,
#popupImage {margin:0;padding:0;}
#contentMainWrapper{padding-bottom:30px;}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper{margin:auto;}
#mainWrapper{}
#sendSpendWrapper {padding:20px 0;width:100%;}
#sendSpendWrapper .buttonRow{margin-right:20px;}
.floatingBox, #accountLinksWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {margin:0;width:47%;}
.floatingBox{width:46%;}
#loginDefault .floatingBox{min-height:240px;}
.shippingEstimatorWrapper {padding:0.5em;}

/*bof header*/
#headerWrapper{}
/*top left navigation*/
#navMainWrapper {margin:0;padding:10px 0;font-size:120%;height:1%;width:100% !important;}
#navMain{width:75%;margin:0 auto;}
#navMain ul  {margin:0;padding:0.5em 0;width:60%;list-style-type:none;text-align:left;line-height:1.5em;}
#navMain ul li {display:inline;}
#navMain ul li a {text-decoration:none;padding:0 0.8em;margin:0;white-space:nowrap;}
#navMain ul li a.navCartContentsIndicator {padding: 10px;border-radius: 10px;margin-right: 5px;}
/*top right search*/
#navMainSearch {width:38%;text-align:right;}
#navMainSearch input[type=text]{vertical-align:top;display:inline-block;border:0;width:65% !important;height:32px;margin:0;font-size:0.9em;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
#navMainSearch input[type=submit]{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;display:inline-block;margin:0;height:32px;}

.cart-add input[type=text]{vertical-align:top;display:inline-block;border:0;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;height:42px;border:3px solid #ccc;}
.cart-add input[type=submit], #navMainSearch input[type=submit]{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;display:inline-block;margin:0;height:32px;}


/*top middle*/
#logo{margin:10px 0;}
#tagline {font-size:1.8em;text-align:center;margin-top:10px;}
/*top categories tabs navigation*/
#navCatTabsWrapper {margin-bottom:10px;width:100%;}
#navCatTabs ul {font-size:0;text-align:center;overflow:hidden;}
#navCatTabs li {font-size:0.75rem;display: inline-block;margin-top:0;}
#navCatTabs ul li:last-child{}
#navCatTabs li a {text-decoration: none;padding: 0.5em 0.5em;display: block;}
#navCatTabs li a:hover {}
#navCatTabs li:hover{}
/*top ezpages links*/
#navEZPagesTop {margin:0;width:100%;}
#navEZPagesTop ul {font-size:0;text-align:center;overflow:hidden;}
#navEZPagesTop li {font-size:0.75rem;display: inline-block;margin-top:0;}
#navEZPagesTop ul li:last-child{}
#navEZPagesTop li a {text-decoration: none;padding: 1.2em 1.0em;display: block;}
#navEZPagesTop li a:hover {}

.pagination{margin-top:-10px;}
.pagination ul {font-size:0;text-align:center;overflow:hidden;padding:0;}
.pagination li {font-size:0.7rem;display: inline-block;margin-top:0;}
.pagination li:first-child{border-left:0;}
.pagination li a {text-decoration: none;padding: 1.2em 1.0em;display: block;}
.pagination li a:hover {}
.pagination .current{padding:1.2em 1.0em;}

/*breadcrumbs*/
#navBreadCrumb {margin:0;padding:0.5em;}
#navBreadCrumb a{text-decoration:none;}
#navBreadCrumb a:visited{}
/*view cart icon for phones*/
#navMain i.fa.fa-share{position:relative;top:-10px;left:-10px;}

/*bof footer*/
/*bottom ezpages links*/
#navSuppWrapper {margin:0;width:100%;}
#navSupp ul {font-size:0;text-align:center;}
#navSupp li {font-size:0.75rem;display: inline-block;margin-top:0;}
#navSupp ul li:last-child{}
#navSupp li a {text-decoration: none;padding: 1.2em 1.0em;display: block;}
#navSupp li a:hover {}
/*footer copyright*/
#siteinfoIP, #siteinfoLegal, #bannerSix{font-weight:normal;padding:1.0em 0;margin:0;}
#siteinfoLegal a{}
#siteinfoLegal a:hover{}

/*bof ezpages*/
#navEZPagesTOCWrapper {float:right;padding:0 20px 20px 20px;margin:0 0 20px 20px;}
#navEZPagesTOC ul {margin:0;padding:0.5em 0;list-style-type:none;line-height:1.5em;}
#navEZPagesTOC ul li {white-space:nowrap;font-size:130%;line-height:150%;}
#navEZPagesTOC ul li a {padding:0 0.5em;margin:0;text-decoration:none;/*remove text decoration if you want an underline*/}
#navEZPageNextPrev{margin-bottom:30px;}

/*bof left and right hand columns*/
/*styles for centerbox, left and right hand headings*/
h2.centerBoxHeading, h3.rightBoxHeading, h3.leftBoxHeading{font-size:1.2em;font-weight:normal;}
h3.rightBoxHeading a, h3.leftBoxHeading a{color: #ffffff;font-weight:normal;text-decoration:none;/*remove text decoration if you want an underline*/}
h3.rightBoxHeading a:hover, h3.leftBoxHeading a:hover {text-decoration:none;}
.rightBoxHeading, .leftBoxHeading, .centerBoxHeading {margin:0;padding:1.0em 0.2em;}
/*sidebox content styles*/
.sideBoxContent {padding:1.0em;margin-bottom:10px;}
.sideBoxContent a{padding:0.3em 0;display:inline-block;font-size:1.1em;text-decoration:none; /*remove text decoration for underlined links*/}
.sideBoxContent a:hover{}
.sideBoxContentItem{padding:1.0em 0;display:block;cursor:pointer;}
.sideBoxContentItem:hover {}
.sideBoxContentItem img, .reviewsContent img{margin-bottom:20px;}
.rightBoxContent {margin-bottom:1em;}
#ezpagesContent, #informationContent, #moreinformationContent, #bestsellersContent, #documentcategoriesContent, #categoriesContent{padding:0;}
ul.list-links, ol.list-links{padding:0;margin-top:0;}
ul.list-links li{list-style-type:none;}
ol.list-links li{}
ul.list-links li a, ol.list-links li a{padding:10px;display:block;}
ul.list-links li:hover, ol.list-links li:hover{}
.cat-count{}
#cartBoxListWrapper li, .orderHistList li{list-style-type:none;padding:8px 0;}
#cartBoxListWrapper li a, .orderHistList li a{display:inline !important;}
.orderHistList i{margin-left:10px;display:inline;}
#cartBoxListWrapper, .orderHistList {margin:0;padding:0;}
#shoppingcartContent hr{display:none;}
.cartBoxTotal{padding:10px !important;}
.sideBoxContent .productPriceDiscount{font-size:130%;margin-top:3px;}
.sideBoxContent .productSpecialPrice{font-size:120%;}

/*bof shopping cart*/
.tableHeading TH {padding:10px 0;}
.tableHeading{}
#cartSubTotal {text-align:right;line-height:2.2em;padding:10px 0 20px 0;font-size:130%;}
.tableRow, .tableHeading, #cartSubTotal {height:2.2em;}
.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {padding: 0.5em 0em;}
.cartUnitDisplay, .cartTotalDisplay {text-align:right;padding-right:0.2em;}
.cartTotalDisplay{font-size:130%;}
#scUpdateQuantity {width:2em;}
.cartQuantity {width:4.7em;}
.cartNewItem {position:relative;}
.cartOldItem {position:relative;}
.cartBoxTotal {text-align:right;font-weight:bold;}
.cartRemoveItemDisplay {width:3.5em;}
.cartAttribsList {margin-left:1em;}
.normalprice, .productSpecialPriceSale {text-decoration:line-through;}
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {}
#ezPageBoxList ul {list-style-type:none;}
#ezPageBoxList li, .cartBoxTotal {margin:0;padding: 0.2em 0;}
#cartBoxEmpty, #cartBoxVoucherBalance {font-weight:bold;}
.totalBox {width:5.5em;text-align:right;padding:0.2em;}
.lineTitle, .amount {text-align:right;padding:0.2em;}
.amount {width:5.5em;}
#shoppingcartBody #shippingEstimatorContent {clear:both;}
.seDisplayedAddressLabel {text-align:center;padding:10px 0;}
.seDisplayedAddressInfo {text-transform:uppercase;text-align:center;font-weight:bold;}
#seShipTo {padding:0.2em;}
TR.tableHeading {}
.rowOdd {height:1.5em;vertical-align:top;}
.rowEven {height:1.5em;vertical-align:top;}
.cartProdTitle{font-size:120%;}
.cartProductDisplay a{text-decoration:none;}
/*shipping estimator styles*/
#shippingEstimatorContent h2{padding:20px 0;font-weight:normal;text-align:center;}
#shippingEstimatorContent table{border:none !important;margin-top:30px;}
#shippingEstimatorContent td, #shippingEstimatorContent th{border:none !important;}
#shippingEstimatorContent th{padding:10px 0;}
#shippingEstimatorContent tr:nth-child(odd){}
#shippingEstimatorContent td{padding:10px;}

/*bof checkout*/
#order-comments{padding:5px 20px 20px 20px;margin:20px 0;}
#checkoutConfirmDefault .cartTableHeading{height:40px;}
#checkoutShipping .important{margin-right:20px;}
#checkoutShipping input[type=radio]{margin-left:20px;}
#checkoutOrderTotals div, #csNotifications .buttonRow{margin-right:20px;}
#checkoutPayment label, #csNotifications input{margin-left:20px;}
div#checkoutShippingContentChoose{margin-bottom:20px;}
#sendSpendWrapper h2{margin-top:-20px;}

/*bof images*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {margin:0 1em 1em 0;}
.cartImage {margin:0.5em 1em;}

/*bof center boxes*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {margin:1em 0;}
.specialsListBoxContents a, .centerBoxContentsAlsoPurch a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .centerBoxContentsNew a{margin:10px auto;font-size:0.8em;display:block;width:90%;text-decoration:none; /*remove text decoration for underlined links*/}
.specialsListBoxContents, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew{font-size:1.6em;cursor:pointer;padding:20px 0;}
.specialsListBoxContents:hover, .centerBoxContentsSpecials:hover, .centerBoxContentsAlsoPurch:hover, .centerBoxContentsFeatured:hover, .centerBoxContentsNew:hover{}
.centerBoxWrapper{overflow:hidden;margin-bottom:30px;clear:both;}
.productPriceDiscount{margin:10px 0 5px 0;display:block;font-size:90%;}
.productPriceDiscount br{display:none;}
.normalprice{font-size:0.9em;}

stylesheet_news_box_manager.css

.news-row { display: table-row; border: 1px solid #444; }
.news-heading { font-weight: bold; }
.news-cell { display: table-cell; padding: 0.5em; border: 1px solid #444; }
.nb-back { float: left; }
.nb-forward { float: right; }
.nb-clear { clear: both; }
.nb-inner { padding: 0.3em; border: 1px solid #444; border-radius: 0.3em; margin-right: 0.3em; }
.news-content::after { clear: both; }
.news-article { padding: 1em 0; clear: both; border-top: 0.1em solid #444; }

.newsBoxGrid { text-align: center; }
.nb-grid-inner { padding: 0.3em; border: 1px solid #444; border-radius: 0.5em; margin: 0.3em; }
.nb-dates { font-size: smaller; }

div.news-mdy > div.news-dates { float: left; display: inline; padding: 0.2em; border: 1px solid #444; border-radius: 0.5em; background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background-origin: border-box; background-clip: padding-box, border-box; margin-right: 0.5em; height: 3em; width: 3em; text-align: center; }
div.news-mdy > div.news-dates span { clear: both; display: block; font-size: 60%; line-height: 130%; }
div.news-mdy > div.news-dates span.nb-day { font-size: 100%; }
div.news-mdy > h2, div.news-mdy > h1 { display: inline; width: 80%; }

#newsscrollbox ol { margin: 0; padding: 0; list-style-position: inside; }
#moreNewsDefault .news_header { font-weight: bold; padding-right: 0.3em; }
#moreNewsDefault .newsContent { padding: 0.3em 0; }
#news-table { display: table; border-collapse: collapse; width: 100%; margin: 0.8em 0; }

.newsBoxList ol { list-style-type: none; margin: 0; padding-left: 0.3em; }

[balihr]

I believe you placed the code for displaying the news in an incorrect position. You've basically closed the contentMainWrapper div, then you have some <font> sections (which is wrong) and then you start the news boxes... I have no idea how that plugin works, but if there's an include... or require... that starts it, check if you placed it in the correct location.

[shags38]

I believe you placed the code for displaying the news in an incorrect position. You've basically closed the contentMainWrapper div, then you have some <font> sections (which is wrong) and then you start the news boxes... I have no idea how that plugin works, but if there's an include... or require... that starts it, check if you placed it in the correct location.

Thanks for the response Leoanard, it helped greatly - I found a stray </div> at the bottom of content in admin/define pages/main page deleted that and the width is now correct. Was so focused on css that I didn't think of main page content. It is now a matter of having the table and the articles in the table display properly .... but I'll get there

thanks again,
Mike

p.s. if no-one has told you yet, your zx_product_sorter plugin works fine on 1.5.7b, no doubt as you would expect it to. I use it very frequently, it is great.

[shags38]

OK, got it figured out - eventually.

Thanks for your help Leoanard.

cheers,
Mike

[balihr]

It's not really a table, it's just divs, thankfully. I hate tables.
I'd drop the display:table and would focus on getting the correct css to have 2 divs next to each other. Either "display: inline-block" or floats or something. You could even try flex, although that can get tricky... Oh, and, remove rowEven and rowOdd, of course.

Product sorter - thanks for the info. I must admit I kinda forgot about that plugin, no questions were asked about it...

[keneso]

FYI
In the admin configuration, you may choose between table, and listing, although both use divs, maybe you want to use the listing.

[shags38]

FYI
In the admin configuration, you may choose between table, and listing, although both use divs, maybe you want to use the listing.

thanks keneso

[dbltoe]

You still have the problem stated in Post #2 and, I doubt the </div> you found was really a stray. The aforementioned <font size="3"> is on the home page seven times. You're even trying to add an image INSIDE an image.

It would work a lot better for you if you fixed the items folks tell you about rather than hopping off somewhere else and making matters worse.