Ways to split a div container into two columns, including a left side and a right side

I need to split the div into two columns where

on the left side

data should float: right;

on the right side

data should float: left;

Sample Html code

<div class="text-center">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="graph_bar_text" class="text-right">
    iOS
  </div>
  <div class="text-left">
    <button mat-button class="graph_bar_button" [style.width.px]="(g1 * 2)">
      <span class="graph_bar_percentage">
        {{g1}}%
      </span>
    </button>
  </div>

  <div class="graph_bar_text" class="text-right">
    Android
  </div>
  <div class="text-left">
    <button mat-button class="graph_bar_button" [style.width.px]="(g2 * 2)">
      <span class="graph_bar_percentage">
        {{g2}}%
      </span>
    </button>
  </div>

  <div class="graph_bar_text" class="text-right">
    Angular
  </div>
  <div class="text-left">
    <button mat-button class="graph_bar_button" [style.width.px]="(g3 * 2)">
      <span class="graph_bar_percentage">
        {{g3}}%
      </span>
    </button>
  </div>
</div>

CSS classes

.graph_bar_text{
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #9b9b9b;
}

.graph_bar_button{
  height: 28px;
  max-width: 200px;
  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);
  border-radius: 12.5px;
  background-color: #4285f4;
  margin-left: 22px;
}

.graph_bar_percentage{
  float: left;
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #ffffff;
}

Current Output

https://i.sstatic.net/I1QtC.png

Desired Result

https://i.sstatic.net/SY8Rv.png

I have looked at a similar question here:

Split Div Into 2 Columns Using CSS

and this example:

Your comments are highly appreciated.

cssangularhtml

Answer №1

Without relying on any CSS framework, you can use floats to achieve the desired outcome. Take a look at the example snippet below for guidance:

.text-center {
  text-align: center;
}

.graph_bar_text{
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #9b9b9b;
  float: left;
  clear: both;
  width: 35%;
  line-height: 28px;
  margin-bottom: 20px;
  text-align: right;
}

.graph_bar_button{
  height: 28px;
  max-width: 200px;
  margin-left: 22px;
  float: left;
  width: 200px;
  border: none;
  background: none;
}

.graph_bar_percentage {
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #ffffff;
  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);
  border-radius: 12.5px;
  background-color: #4285f4;
  display: block;
}
<div class="text-center">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="graph_bar_text">
    iOS
  </div>
  <div class="text-left">
    <button class="graph_bar_button">
      <span class="graph_bar_percentage" style="width: 90%">
        90%
      </span>
    </button>
  </div>

  <div class="graph_bar_text">
    Android
  </div>
  <div class="text-left">
    <button class="graph_bar_button">
      <span class="graph_bar_percentage" style="width: 20%">
        20%
      </span>
    </button>
  </div>

  <div class="graph_bar_text">
    Angular
  </div>
  <div class="text-left">
    <button class="graph_bar_button">
      <span class="graph_bar_percentage" style="width: 50%">
        50%
      </span>
    </button>
  </div>
</div>

Answer №2

To properly format your texts, make sure to wrap them and utilize flex properties

.row {
  display: flex;
  align-items: center;
}

.graph_bar_text{
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #9b9b9b;
  text-align: right;
  width: 100px;
}

.graph_bar_button{
  height: 28px;
  max-width: 200px;
  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);
  border-radius: 12.5px;
  background-color: #4285f4;
  margin-left: 22px;
}

.graph_bar_percentage{
  float: left;
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #ffffff;
}
<div class="text-center">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="row">
    <div class="graph_bar_text" class="text-right">
      iOS
    </div>
    <div class="text-left">
      <button mat-button class="graph_bar_button" [style.width.px]="(g1 * 2)">
        <span class="graph_bar_percentage">
          {{g1}}%
        </span>
      </button>
    </div></div>
    <div class="row">
    <div class="graph_bar_text" class="text-right">
      Android
    </div>
    <div class="text-left">
      <button mat-button class="graph_bar_button" [style.width.px]="(g2 * 2)">
        <span class="graph_bar_percentage">
          {{g2}}%
        </span>
      </button>
    </div>
    </div>
    <div class="row">
    <div class="graph_bar_text" class="text-right">
      Angular
    </div>
    <div class="text-left">
      <button mat-button class="graph_bar_button" [style.width.px]="(g3 * 2)">
        <span class="graph_bar_percentage">
          {{g3}}%
        </span>
      </button>
    </div>
  </div>
</div>

Answer №3

To enhance the structure of the HTML, I would organize the labels in a flex column and place the graphs in a separate flex column for better presentation and layout. Eliminating the need for floats ensures that the document flow remains undisturbed.

.container {
  text-align: center;
}

.graphs {
  display: flex;
  width: 100%;
  justify-content: center;
}

.graph_bar_text {
  display: flex;
  flex-direction: column;
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #9b9b9b;
}

.graph_bar_text p {
  margin: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.graph_bar {
  display: flex;
  flex-direction: column;
}

.graph_bar_button {
  height: 28px;
  max-width: 200px;
  box-shadow: 0 9px 54px 0 rgba(66, 133, 244, 0.37);
  border-radius: 12.5px;
  background-color: #4285f4;
  margin-left: 15px;
}

.graph_bar_percentage {
  font-family: AvenirNext;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 0.1px;
  color: #ffffff;
}
<div class="container">
  <p class="Project_Analytics_Heading">Time per Department</p>
  <div class="graphs">
    <div class="graph_bar_text">
      <p>iOS</p>
      <p>Android</p>
      <p>Angular</p>
    </div>
    <div class="graph_bar">
      <button mat-button class="graph_bar_button">
       <span class="graph_bar_percentage">10%</span>
      </button>
      <button mat-button class="graph_bar_button">
        <span class="graph_bar_percentage">10%</span>
      </button>
      <button mat-button class="graph_bar_button">
        <span class="graph_bar_percentage">10%</span>
      </button>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is it that vanilla HTML/JS (including React) opts for camelCase in its styling conventions, while CSS does not follow the same pattern

Each type of technology for styling has its own set of conventions when it comes to naming properties, with camelCase and hyphenated-style being the two main options. When applying styles directly to an HTML DOM Node using JavaScript, the syntax would be ...

javascripthtmlcssconventions

Problem with Bootstrap 4 layout in Firefox - works fine, but not displaying correctly in

Hey everyone, I've encountered an issue with my code. It's working perfectly fine in Firefox, but in Chrome and Opera, the layout is all messed up. Can anyone help me pinpoint what might be going wrong here? <div class="row broadband-block"&g ...

htmlcssflexboxbootstrap-4

Alignment of a Definition List with Omissions of Definitions

Often, I come across applications with forms containing optional fields. In the Show view, these fields tend to "collapse" together and lose alignment with their corresponding labels. For instance, if I have 3 fields that should be displayed as: Phone: 3 ...

htmlcssruby-on-rails

The peculiar formatting issue with the jQuery datepicker that arises when adding more months

When adjusting the numberOfMonths parameter to a higher value such as 6, I noticed that the datepicker display appears unusual with the background extending further than expected. Take a look at my demonstration on jsfiddle: http://jsfiddle.net/zw3z2vjh/ ...

javascriptjquerycssdatepicker

Utilizing float positioning in Responsive Web Design

Attempting to implement a two-column float CSS layout with specific width percentages. My CSS styles for the two columns are as follows: .div1 { width: 25%; float: left; } .div2 { width: 75%; float: right; } .container { width: 960px; } @media scr ...

cssresponsive-design

Guide on setting up a chart using data fetched from an API?

I'm looking to incorporate ngx-charts into my project, but I'm struggling with initializing the chart with data retrieved from my API. Setting up a vertical bar chart seems straightforward. The data structure I have is like this: https://stackb ...

angularngx-charts

Encountered an error while attempting to install the DataTables npm package in an Angular

I am trying to add datatables to my angular application. Upon running ng add angular-datatables An error code is displayed (refer to the image). error image The cause of this error is unknown to me. Please review the package.json file as well. package.j ...

angularangular-datatablesnpm-package

using CSS to position elements that are generated dynamically

Hey there, I'm facing a little issue with my elements. These elements are being generated dynamically and I'd like to display them in a 4 column layout. The challenge is that they arrive separately and I can't simply wrap them in a div and u ...

css

Fading Out with JQuery

My page contains about 30 same-sized divs with different classes, such as: .mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures { background:rgba(0, 0, 0, .30); float:left; position:relative; overf ...

javascriptjqueryhtmlcssfade

Having trouble with rendering components in React and Bootstrap?

Attempting to display basic Bootstrap components using React. This corresponds to the index.html file: <!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="j ...

javascripthtmltwitter-bootstrapreactjs

Initializing the ngOnInit function with 'this' keyword

I've encountered a scope issue where the lines "this.catVotes = catData" are within another function, preventing me from directly assigning it to "catVotes: Number;" Any suggestions on how I can overcome this challenge? catVotes: Number; dogVotes: N ...

angular

Are there any methods to incorporate Facebook and Google login into an Ionic progressive web app (PWA)?

After successfully developing an app in Ionic 3 for Android and iOS, I encountered a problem when adding the browser platform. The Facebook and Google login features were not functioning as expected. Despite the assurance from Ionic documentation that the ...

facebookangulartypescriptgoogle-plusionic3

Changing the background color of the dropdown button in Vue Bootstrap: A step-by-step guide

I've been struggling to modify the background color of a dropdown button, but no method seems to work. I've attempted changing it by using ID, removing its class and applying a new one, and even using !important to override the styles, but the ba ...

javascriptcssvue.jsnuxt.jsbootstrap-vue

Is there a way to display a list of dropdown menu options using Selenium with Python?

I am currently attempting to utilize Selenium Python and its PhantomJS function in order to print out all the items from the first drop-down menu on this particular page (). Unfortunately, I keep encountering a No Attribute error message. If anyone could ...

pythonhtmlseleniumselenium-webdriverweb-crawler

Attempting to execute a synchronous delete operation in Angular 6 upon the browser closing event, specifically the beforeunload or unload event

Is there a way to update a flag in the database using a service call (Delete method) when the user closes the browser? I have tried detecting browser close actions using the onbeforeunload and onunload events, but asynchronous calls do not consistently wor ...

javascriptangulartypescriptsynchronousbrowser-close

Using Jquery to select the parent element and then adding a CSS selector to it

I am currently exploring the most effective approach to accomplish this task. My goal is to expand/collapse all hidden divs on a given page. While this is usually not an issue, I have four distinct sections that necessitate independent expand/collapse func ...

jqueryhtmlcss

Fetch HTML content from a local file using Vue

I am currently searching for a method to import HTML content from a file located at /src/activities/0/2/content.html The specific numbers in the path are interchangeable variables. My goal is to achieve something along the lines of mounted(){ this ...

htmlvue.jswebpackvuejs2vue-cli

How can one ensure that the element declared in the "let" clause is displayed in an HTML Angular template?

I am working on a component that can render a mat-table. Each cell can have a specified value, or if it is present, the component calls an ngTemplateOutlet and passes it a rendering function obtained from the calling object. export interface ColumnConfig { ...

angulartypescriptangular-materialeslinttypescript-eslint

The href tag linking to Google Maps is malfunctioning when used in Internet Explorer browser

Need help with a link issue <a target="blank" href="https://www.google.com/maps/search/?q=Κωστή Παλαμά, Αθήνα, Ελλάδα">We are here!</a> The link works in Firefox and Chrome, but not in Internet Explorer. Any ideas on how ...

htmlgoogle-mapsinternet-explorer

Tips for validating dates in Angular 4

Recently, I have started working with Angular and in my application I am facing a challenge regarding date validation. I need to validate a date input and display an error message based on the validation criteria. To achieve this, I am utilizing ngx-boots ...

angulartypescript