How to align DIV group with other divs on a page

Question

I've taken over a bunch of TIBCO Spotfire [2] templates. Based on one of those, we've received a request to create something really similar.

Unfortunately, I'm having troubles modifying the code, so every element is perfectly aligned vertically. On the "source" code, there's no issue since there are fewer tabs to be handled.

Currently it looks like that: Expected behaviour would be to have Tabs, being in the same line as unavailable image & text next to it.

I've tried playing around with HTML/CSS codes, however as I'm not an expert in such (I can do basics), I came here looking for a helpful soul.

$(".topBar").css({
  "float": "bottom",
  "background-color": "#003DAF",
  "height": "100%",
  "font-family": "Segoe UI Light"
});

$(".btnGroup").css({
  "width": "90%",
  "margin-left": "2%",
  "display": "inline-block"
});

$("h3").css({
  "font-family": "Segoe UI Light",
  "font-size": "12px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "left",
  "margin-top": "1em",
  "margin-bottom": "0.5em",
  "margin-left": "0",
  "margin-right": "0"
});
$("h4").css({
  "font-family": "Segoe UI Light",
  "font-size": "12px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#000000",
  "text-align": "left",
  "margin-top": "0",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$("h5").css({
  "font-family": "Segoe UI Light",
  "font-size": "13px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "left",
  "margin-top": "0.5em",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$("h6").css({
  "font-family": "Segoe UI Light",
  "font-size": "13px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "right",
  "margin-top": "0.5em",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$(".hiddenButtons").css({
  "display": "none"
});

$(".logo").css({
  "float": "left"
});

$('.main-button-group').css({
  'display': '-webkit-flex',
  'margin': '0 0 1rem',
  'margin-bottom': '0px',
  'color': '#fff',
  'text-decoration': 'none'
});

$('.main-button-group .button-group').css({
  'display': 'inline-block',
  'position': 'relative',
  '-webkit-flex': '1',
  '-webkit-align-items': 'center',
  '-ms-flex-align': 'center',
  '-webkit-justify-content': 'center',
  '-ms-flex-pack': 'center',
  'max-width': '100em',
  'padding': '0.786em 0',
  'font-family': 'Segoe UI Light',
  'font-size': '0.7rem',
  'font-weight': '600',
  'text-align': 'center',
  'color': '#fff',
  'background-color': '#003daf',
  'letter-spacing': '1px',
  'cursor': 'pointer',
  'transition': 'background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out',
  '-webkit-appearance': 'none',
  '-moz-appearance': 'none',
  '-webkit-user-select': 'none',
  '-moz-user-select': 'none',
  '-ms-user-select': 'none',
  'user-select': 'none',
  '-webkit-touch-callout': 'none',
  '-webkit-tap-highlight-color': 'transparent',
  '-webkit-transform': 'translate3d(0, 0, 0)',
  'transform': 'translate3d(0, 0, 0)',
  'overflow': 'hidden'
});

$('.active').css({
  'background-color': '#09f'
});

$(".button-group").hover(function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
}, function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#003daf'
  });
});

$(".active").hover(function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
}, function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
});

$(".button-group").focus(function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
}, function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#003daf'
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<DIV class=hiddenButtons>
</DIV>
<!-- Navigation bar -->
<DIV class=topBar>
  <DIV class=logo>
    <IMG style="HEIGHT: 50px; MARGIN: 5px;" src="3309c8c106fc4624bd0939a1e78e45b8.png">
  </DIV>
  <DIV style="display:inline-block;; width:90%">
    <DIV style='float:left; width:100%'>
      <DIV style='float:left; width:8%; '>
        <H3>First Line
          <br/> Second Line
          <br/> Third Line</H3>
      </DIV>
    </DIV>
    <DIV class=btnGroup>
      <DIV class=main-button-group>
        <div id="tab1" class="button-group">Tab1</div>
        <div id="tab2" class="button-group active">Tab2</div>
        <div id="tab3" class="button-group">Tab3</div>
        <div id="tab4" class="button-group">Tab4</div>
        <div id="tab5" class="button-group">Tab5</div>
        <div id="tab6" class="button-group">Tab6</div>
        <div id="tab7" class="button-group">Tab7</div>
        <div id="tab8" class="button-group">Tab8</div>
        <div id="tab9" class="button-group">Tab9</div>
        <div id="tab10" class="button-group">Tab10</div>
        <div id="tab11" class="button-group">Tab11</div>
      </DIV>
    </DIV>
    <DIV style="FLOAT: left;  width:13%">
      <H5>Tab2</H5>
    </DIV>
  </DIV>
</DIV>

Note: code might be a mess since I'm still working on cleaning it up.

[2] BI reporting tool that allows use of HTML/CSS/JS/JQuery/etc. inside of it

Do you HAVE to use inline styles ? Or you can use a separate css stylesheet ? — Mihai T, Mar 27 '19 at 09:31
Are you supposed to set the CSS of given elements in JavaScript (jQuery)? You might want to move all CSS related coding to the CSS part of your application. Also you do not have to use capital letters when working with HTML. If I understand your question correctly, you would like all of the tabs to appear in-line horizontally centered? Please elaborate your problem (provide us with an example of how you would like your elements to be positioned if possible). — Barrosy, Mar 27 '19 at 09:37
The user did state that they are still working on the code and going to clean it up. I don't think this question should be downvoted due to the user giving their code in a fiddle to demonstrate and explain their issues. — designtocode, Mar 27 '19 at 09:47
@Barrosy basically, that's the easiest way to implement that in Spotfire. I have to pick between moving it to JavaScript/jQuery or have it implemented directly above HTML code, unfortunately can't add outside files as tool simply doesn't allow that. — glaeran, Mar 27 '19 at 09:56
@glaeran FYI it *is* possible to use an external stylesheet, but it requires some Stupid JQuery Tricks(tm). see my answer on this other question: https://stackoverflow.com/questions/48160850/how-can-i-link-a-css-stylesheet-in-a-spotfire-analysis — niko, Mar 27 '19 at 15:03

designtocode · Accepted Answer · 2019-03-27T10:01:19.233

1

See updated fiddle here https://jsfiddle.net/jefac65b/1/

Remove the widths for the div and added flex

<DIV style="display:flex;; width:90%">
    <DIV style='float:left;'>
      <DIV style='float:left;'>
        <H3>First Line
          <BR> Second Line
          <BR> Third Line</H3>
      </DIV>
    </DIV>

Aligning the tabs centered to the left hand menu https://jsfiddle.net/oyt4fz9g/

$('.main-button-group').css({
  'display': '-webkit-flex',
  'margin': '0 0 1rem',
  'margin-bottom': '0px',
  'color': '#fff',
  'text-decoration': 'none',
   'height': '100%',
    'align-items': 'center'
});

edited Mar 27 '19 at 10:01

answered Mar 27 '19 at 09:37

designtocode

2,215
4
21
35

The tabs will be aligned to top which makes wonder if OP wants this kind of behaviour. Maybe OP wants these centered instead? – Barrosy Mar 27 '19 at 09:41
@Barrosy from user: 'Expected behaviour would be to have Tabs, being in the same line as unavailable image & text next to it.' – designtocode Mar 27 '19 at 09:48
It is on the same line, but OP did not state wether it should be centered or aligned to the top or bottom. "Being in the same line" can mean many things here. – Barrosy Mar 27 '19 at 09:55
Having them centered would be ideal – glaeran Mar 27 '19 at 09:56
Glad to have helped @glaeran. Happy coding – designtocode Mar 27 '19 at 11:34

How to align DIV group with other divs on a page

1 Answers1