I Have a Menu that Contains Some Items with float: right and float: left Styles.
Sometimes these items are about 3 or 4 and sometimes about 9 or 10.
The problem occurs When the Client increases the Chrom Scale. so as much as he increase the scale from 90% the items get Disappeared one by one.
I can change the scaling to 90 on Client Login but they may change it again. I want to handle it in CSS like when the client increases the scale, items in right and Left be visible in new Lines (I mean if item Number 1 is going to be Disappeared just move it to the next Line) or just don't get big on scale change.
My menu does not have any specific CSS Code, here is simple :
.TableHeaderAndFooter {
border-bottom: 2px lightgray solid !important;
border-top: 2px lightgray solid !important;
background: #34495e none repeat scroll 0 0;
height: 36px;
padding: 6px;
width: 100%;
}
.Tabletoolbox {
border-radius: 4px;
margin: 1px 10px 0;
padding: 0 2px;
}
.fright {
float: right;
direction: rtl;
text-align: right;
}
.fleft {
float: left;
direction: ltr;
text-align: left;
}
.fleft-enpages {
float: left;
direction: ltr;
text-align: left;
padding: 10px;
}
.TableHeader {
background: #34495e none repeat scroll 0 0;
height: 32px;
width: 100%;
}<div class="TableHeaderAndFooter TableHeader">
<!-- Right Items -->
<div class="Tabletoolbox fright">Item 1 Right</div>
<div class="Tabletoolbox fright">Item 2 Right</div>
<div class="Tabletoolbox fright">Item 3 Right</div>
<!-- Left Items -->
<div class="Tabletoolbox fleft">Item 1 Left</div>
<div class="Tabletoolbox fleft">Item 1 Left</div>
<div class="Tabletoolbox fleft">Item 1 Left</div>
<div class="Tabletoolbox fleft">Item 1 Left</div>
</div>