how to make row next to each other in css?

104
June 15, 2018, at 5:10 PM

I am having trouble of putting my row next to each other in css all I want to do is to show my row next to each other horizontal rather than vertically. Thanks for the help.

Here is my code:

.ui-datatable .ui-datatable-header,
.ui-datatable .ui-datatable-footer {
  margin-left: 10px;
}
.ui-widget-header {
  background: #E8EDFF;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: #E8EDFF;
}
html .ui-datatable-tablewrapper {
  overflow: hidden;
}
html .ui-widget-content {
  display: flex;
  flex-direction: column;
  margin-right: 85px;
}
html .ui-widget-content {
  border: cornflowerblue;
}
<p:dataTable var="jobData" value="#{myBean.wage}">

  <p:column headerText="Hourly">
    <h:outputText value="#{jobData.hourData}" />
  </p:column>
  <p:column headerText="Biweekly">
    <h:outputText value="#{jobData.checkData}" />
  </p:column>
  <p:column headerText="Annual">
    <h:outputText value="#{jobData.annualData}" />
  </p:column>

</p:dataTable>
Answer 1

If you are using Bootstrap you can do something like this.

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ..content for left here
        </div>
        <div class="col-xs-6">
            ..content for right here
        </div>
    </div>
</div>
Answer 2

Using flexbox, you can do the following:

  * { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
  } 
  .row { 
    display: flex; 
  } 
  p { 
    border: 1px solid #333; 
  }
  <div class="row"> 
    <div class="column"> 
      <p>Hourly</p> 
      <p>Biweekly</p> 
      <p>Annual</p> 
    </div> 
    <div class="column"> 
      <p>$13.9</p> 
      <p>$1,055.20</p> 
      <p>$27,540.52</p> 
    </div> 
    <div class="column"> 
      <p>$13.55</p> 
      <p>$1,084.00</p> 
      <p>$28,292.42</p> 
    </div> 
  </div>

READ ALSO
Is using href=&ldquo;javascript:&rdquo; dangerous in Angular 2+?

Is using href=“javascript:” dangerous in Angular 2+?

From the Angular security guide, there's this:

108
How do I make every canvas object &ldquo;clickable&rdquo;?

How do I make every canvas object “clickable”?

I figured how to detect a mouseclick in canvasNow I need to solve these 2 things:

85
fullcalendar height not considering surrounding container

fullcalendar height not considering surrounding container

I have a vuejs project which I am integrating vue-fullcalendar into and I am running into an issue where the

129
Customise title bar in shiny

Customise title bar in shiny

I am trying to customise a shiny page

102