jleesaxon Posted May 26, 2014 Share Posted May 26, 2014 (edited) I have three columns (user info block, quick search block, cart block) in my header. To check for problems (an extra margin definition or something like that), I've tried several standard column widths. It works perfectly as: col-sm-2 [16.66667%] col-sm-5 [41.66667%] col-sm-5 [41.66667%] col-sm-3 [25%] col-sm-3 [25%] col-sm-6 [50%] col-sm-4 [33.33333%] col-sm-4 [33.33333%] col-sm-4 [33.33333%] However, when I tried to create my own custom column width: col-sm-3 [25%] col-sm-4a [37.5%] col-sm-4a [37.5%] It no longer fits. They spill over onto three separate lines. Even when I try 37.4%. What am I missing? Is the below not the only definition I have to add to global.css? .col-sm-4a { width: 37.5% } Edited May 27, 2014 by jleesaxon (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted May 27, 2014 Share Posted May 27, 2014 you probably forgor about float values and several other things like position, check styles for col-sm-4 webkit-animation-delay: 0s; -webkit-animation-direction: normal; -webkit-animation-duration: 0s; -webkit-animation-fill-mode: none; -webkit-animation-iteration-count: 1; -webkit-animation-name: none; -webkit-animation-play-state: running; -webkit-animation-timing-function: ease; -webkit-app-region: no-drag; -webkit-appearance: none; -webkit-backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-composite: source-over; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-border-fit: border; -webkit-border-horizontal-spacing: 0px; -webkit-border-image: none; -webkit-border-vertical-spacing: 0px; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; -webkit-box-shadow: none; -webkit-clip-path: none; -webkit-column-break-after: auto; -webkit-column-break-before: auto; -webkit-column-break-inside: auto; -webkit-column-count: auto; -webkit-column-gap: normal; -webkit-column-rule-color: rgb(119, 119, 119); -webkit-column-rule-style: none; -webkit-column-rule-width: 0px; -webkit-column-span: none; -webkit-column-width: auto; -webkit-filter: none; -webkit-font-smoothing: auto; -webkit-highlight: none; -webkit-hyphenate-character: auto; -webkit-line-box-contain: block inline replaced; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: en; -webkit-margin-after-collapse: collapse; -webkit-margin-before-collapse: collapse; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-clip: border-box; -webkit-mask-composite: source-over; -webkit-mask-image: none; -webkit-mask-origin: border-box; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; -webkit-perspective: none; -webkit-perspective-origin: 199.984375px 47.5px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(119, 119, 119); -webkit-text-emphasis-position: over; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgb(119, 119, 119); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgb(119, 119, 119); -webkit-text-stroke-width: 0px; -webkit-transform: none; -webkit-transform-origin: 199.984375px 47.5px; -webkit-transform-style: flat; -webkit-transition-delay: 0s; -webkit-transition-duration: 0s; -webkit-transition-property: all; -webkit-transition-timing-function: ease; -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; align-content: stretch; align-items: stretch; align-self: stretch; alignment-baseline: auto; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; baseline-shift: baseline; border-bottom-color: rgb(119, 119, 119); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom-style: none; border-bottom-width: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(119, 119, 119); border-left-style: none; border-left-width: 0px; border-right-color: rgb(119, 119, 119); border-right-style: none; border-right-width: 0px; border-top-color: rgb(119, 119, 119); border-top-left-radius: 0px; border-top-right-radius: 0px; border-top-style: none; border-top-width: 0px; bottom: auto; box-shadow: none; box-sizing: border-box; buffered-rendering: auto; caption-side: top; clear: none; clip: auto; clip-path: none; clip-rule: nonzero; color: rgb(119, 119, 119); color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; cursor: auto; direction: ltr; display: block; dominant-baseline: auto; empty-cells: show; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flex-basis: auto; flex-direction: row; flex-grow: 0; flex-shrink: 1; flex-wrap: nowrap; float: left; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: Arial, Helvetica, sans-serif; font-kerning: auto; font-size: 13px; font-style: normal; font-variant: normal; font-variant-ligatures: normal; font-weight: normal; glyph-orientation-horizontal: 0deg; glyph-orientation-vertical: auto; height: 95px; image-rendering: auto; justify-content: flex-start; kerning: 0; left: auto; letter-spacing: normal; lighting-color: rgb(255, 255, 255); line-height: 18px; list-style-image: none; list-style-position: outside; list-style-type: disc; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; marker-end: none; marker-mid: none; marker-start: none; mask: none; mask-type: luminance; max-height: none; max-width: none; min-height: 1px; min-width: 0px; object-fit: fill; object-position: 50% 50%; opacity: 1; order: 0; orphans: auto; outline-color: rgb(119, 119, 119); outline-offset: 0px; outline-style: none; outline-width: 0px; overflow-wrap: normal; overflow-x: visible; overflow-y: visible; padding-bottom: 0px; padding-left: 15px; padding-right: 15px; padding-top: 50px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; paint-order: fill stroke markers; pointer-events: auto; position: relative; resize: none; right: auto; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1; tab-size: 8; table-layout: auto; text-align: start; text-anchor: start; text-decoration: none solid rgb(119, 119, 119); text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-transform: none; top: auto; touch-action: auto; transition-delay: 0s; transition-duration: 0s; transition-property: all; transition-timing-function: ease; unicode-bidi: normal; vector-effect: none; vertical-align: baseline; visibility: visible; white-space: normal; widows: auto; width: 399.984375px; word-break: normal; word-spacing: 0px; word-wrap: normal; writing-mode: lr-tb; z-index: auto; zoom: 1; Link to comment Share on other sites More sharing options...
jleesaxon Posted May 27, 2014 Author Share Posted May 27, 2014 Wow, I'm pretty stupid. I did in fact forget to add it to the float list. Link to comment Share on other sites More sharing options...
vekia Posted May 27, 2014 Share Posted May 27, 2014 so, with float css style command everything is alright? Link to comment Share on other sites More sharing options...
jleesaxon Posted May 27, 2014 Author Share Posted May 27, 2014 Yes, that solved it, thank you Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now