I would like to include two separate divs within one larger div element

I need to include two div elements within a single div, one positioned to the right and the other to the left.

<html>
<div>

      <div><button  class="mat-button menu-button">
          <mat-icon color="primary"> remove </mat-icon>
        Add Site
        </button>
      </div>  
      <div *ngIf="showButtons">
          <button>edit</button>
            <button >Save</button>
      </div>
  
  </div>
  </html>

Answer №1

To position the left and right div elements, you can utilize the float css property.

.left {
  float: left;
}

.right {
  float: right;
}
<div>

  <div class='left'><button class="mat-button menu-button">
          <mat-icon color="primary"> remove </mat-icon>
          Add Site
        </button>
  </div>
  <div *ngIf="showButtons" class='right'>
    <button>edit</button>
    <button>Save</button>
  </div>

</div>

Answer №2

Consider using ng-container instead of div when placing buttons on the right or left side.

<div>
    <button class="mat-button menu-button">
        <mat-icon color="primary"> remove </mat-icon>
        Add Site
    </button>
    <ng-container *ngIf="showButtons">
        <button>edit</button>
        <button>Save</button>
    </ng-container>
</div>

Answer №3

If you want to change the layout to use flexbox, you can do so by setting the display property to flex. By default, the direction of the flex container is row:

<div style="display:flex;">

      <div><button  class="mat-button menu-button">
          <mat-icon color="primary"> remove </mat-icon>
        Add Site
        </button>
      </div>  
      <div *ngIf="showButtons">
          <button>edit</button>
          <button >Save</button>
      </div>
  
  </div>

Answer №4

.firstCol{
float : left;
}
<html>
   <div class="container">
      <div class="row">
          <div class="col-md-12">
              <div class="firstCol"><button  class="mat-button menu-button">
                 <mat-icon color="primary"> remove </mat-icon>
                   Add Site
                  </button>
              </div>  
              <div *ngIf="showButtons">
                 <button>edit</button>
                 <button >Save</button>
              </div>
           </div>
        </div>
    </div>
</html>

Answer №5

Your performance was outstanding! Simply include a class name or an Id in the div, and you'll have full control over its style using CSS. For instance, you can easily manipulate its placement using the float property.

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

Can the :not pseudo selector be utilized in conjunction with the adjacent sibling combinator?

I am attempting to achieve the following - when the table footer is rendered, I want to remove the border radius from the table cells within the last row inside the table body. I am unsure if the code below will do the trick: table tbody:not(+ tfoot) tr td ...

Unable to view post in a single page

Having trouble with my Wordpress blog on mobile. I can't seem to open posts in a single page, as there is no response when clicking or touching the post on the main page. The div class for the main page post is entry-content. Here are some styling co ...

Activate month input programmatically

Having an issue trying to open a month popup using jQuery trigger. I have a button and an input of type month, but when the button is clicked, the popup does not open as expected. You can find the fiddle for this question here. $(document).ready(functio ...

Creating a specialized Docker image for Angular 9 production deployment

I don't have much experience with frontend development, but I'm currently working on creating a Docker image for an Angular 9 application. Here's what I've tried: ARG NODE_VERSION=12.16.1 # stage - # 1 FROM node:${NODE_VERSION}-buster- ...

Navigate to the designated location

Example: function smooth_scroll(){ var target = document.location.hash.replace("#",""); var selector = 'div[id='+target+']'; alert(selector); $('html,body').animate( {scrollTop: $(selector).of ...

HTML embedded content is not appearing on the React webpage

I'm attempting to incorporate GoFundMe donation buttons into a React page, but unfortunately, they aren't displaying on the screen. const Donation = () => { return ( <div> <div className="gfm-embed" d ...

Add styles to IMG elements only if there are no existing styles already applied

Feeling a bit embarrassed asking such a basic question, but I seem to be struggling with it. I want to use CSS to style all IMG elements on my page that do not have any other class applied to them. For instance, I want all images to have a red border by ...

Increasing the level of CSS list counters

HTML <ol> <li>item1 <ol> <li>item2</li> </ol> </li> <li>item1 <ol> <li>item2</li> <li>item3</li> </ol> </li> </ol> SC ...

Exploring Angular 11: Transforming a form control into a nested form array within another form array

I am working on an array form that includes the following controls: this.formBuilder.group({ fieldName: [null, Validators.required], displayName: [null, Validators.required], fieldType: [0, Validators.required], defaultValue: [null], fi ...

How to Customize the Placeholder Text of a TextField

When working with the TextField API, I noticed that there is no mention of how to style the pseudo placeholder element of the input element. I want to customize the default styling of the placeholder text, but the usual CSS tricks don't seem to work ...

Getting the coordinates of a clicked portion in a PDF using ng2-pdf-viewer

I am looking to retrieve the position of an element from a PDF document. I am currently utilizing the ng2pdf viewer for this task. In my stackblitz example, I am trying to extract the coordinates of the clicked image within the PDF file. https://stackbli ...

WebSocket backend proxied with Angular-CLI

My current setup is working flawlessly for Http requests, but I'm encountering issues with WebSocket. I've searched for documentation on how to set up a proxy for WS but haven't found anything. Can someone guide me on how to do this? ng ser ...

Summing arrays of numbers within an HTML form input and showcasing the final result

I have an array with multiple titles such as 'Get 20% Off', 'Receive 40% Savings', 'Grab 10% discounts', etc. My goal is to extract the numeric value before the '%' sign from each title and pass it as an input into a ...

Exploring Angular 17 with the Nebular framework through the implementation of Standalone Components

Exploring Angular in combination with Nebular for UI has been my recent focus. To get started, I decided to create a quick app and dive into the intricacies of these frameworks. After setting up Angular, I initialized a new app using app new my-app. I en ...

Focusing in on a PARTICULAR SECTION of the picture

My website has a unique concept - comparing two articles side by side. One of the articles is mine, while the other is displayed alongside it. To capture entire pages for comparison, I utilize Google's GoFullPage feature to take screenshots. The goa ...

Utilizing dynamic IDs in JavaScript for HTML elements: A comprehensive guide

I am in the process of dynamically creating a drop-down box. While I have successfully created dynamic drop-down boxes, I now need to populate them with values from a database. To achieve this, I believe I need to use an on-click function. Despite attemp ...

React Ant Design: Encountered a warning for 2 elements having non-unique properties

I have incorporated the Carousel component, with each one containing a different component. One contains a form, while the other includes an external library component called react-input-otp. https://codesandbox.io/s/pensive-einstein-uucvm?fontsize=14& ...

The lazy-loaded Angular module encountered an issue when attempting to access its child routes

I have been working on a dashboard app and currently, I've implemented two lazy loaded modules named AuthModule and AdminModule. The routing configuration in my app-routing-module.ts is as follows: const routes: Routes = [ { path: '&apo ...

Tips for linking a column value in a data table with Angular 7

I have an application where I retrieve data in a table format. This front end of this application is built on angular7. Now, I need certain column values to be links that when clicked will display a new component. For example: Column1 Column2 ...

Unable to properly shut the sliding-over modal

I have implemented a customized version of the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on my webpage. However, I am facing difficulty in closing it using another link. Any assistance on ...