Positioning elements in HTML and CSS codes

Question

I am trying to position a form like the following photo(The first two <div>s before <script> tag are the related code of these two elements:

And this is the HTML code of this page:

<div id="chart_container" #chart_container style="margin-left: 10px;">
  <!-- <pan-zoom [config]="panzoomConfig"> -->
  <div class="flowchart-example-container" id="exampleDiv" #exampleDiv></div>
  <!-- </pan-zoom> -->
</div>

<div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>


<script>
  function openForm() {
    document.getElementById("myForm").style.display = "block";
  }

  function closeForm() {
    document.getElementById("myForm").style.display = "none";
  }
</script>

<input type="button" value="delete" (click)="deleteOperationOrLink()" style="margin-left:20px;">
<input type="button" value="load" (click)="load()">
<input type="button" value="get" (click)="get()">

<br>
<div class="disp">
  <textarea nbInput shape="round" name="diagModel" [(ngModel)]="diagModel" placeholder="model" style="height: 300px; width: 500px; margin-left: 20px;"></textarea>

  <div class="palette">
    <button md-button class="input_circle_icon" (click)="addNewOperator3()">ورودی</button>
    <button md-button class="output_circle_icon" (click)="addNewOperator4()">خروجی</button>
    <button md-button class="myTest_icon" (click)="addNewOperator()">عملگر یک</button>
    <button md-button class="myTest2_icon" (click)="addNewOperator2()"> عملگر دو</button>
  </div>
</div>

I don't know how to put the form in the top-right corner of the page.

Donada · Accepted Answer · 2019-12-03 19:50:34Z

2

There is a lot of ways to do it:

1° way - You can give a 'position:absolute' to your id "myForm": example:

#myForm {
    position: absolute;
    right:0;
    top: 0;
}

2° way - Give a "width" and "display:inline-block" to each div: (for this example you should create a external div with the "width:100%") example:

#externalDiv {
   width:100%;
   float:left;
} 
#myForm {
    width: 40%;
    display: inline-block;
}

#chart_container {
    width: 60%;
    display: inline-block;
}

answered Dec 3, 2019 at 19:50

Donada

2981 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tijo John · Accepted Answer · 2019-12-03 19:40:02Z

1

you can use the following method

<div class="header">
   <div class="playerOne">
      Oli
   </div>
   <div class="playerTwo">
      Matt
   </div>
</div>

CSS

.header {
  display: inline-block; 
  width: 100%;
  border: 1px solid red;
 }
.playerOne {
  float: right;
 }
 .playerTwo {
   float: left;
 }

answered Dec 3, 2019 at 19:40

Tijo John

6221 gold badge9 silver badges20 bronze badges

Comments

Pedro Henrique · Accepted Answer · 2019-12-03 19:48:25Z

1

If you are using the framework, it is interesting to use a class.

In line <div class="disp"> add class pull-left and line <div class="form-popup" id="myForm"> add class pull-right.

If you are not using the framework, it is interesting to add to your style.

.disp{
   float: left
}
#myForm{
   float: right
}

Reference: Float

edited Dec 3, 2019 at 19:48

answered Dec 3, 2019 at 19:42

Pedro Henrique

1464 bronze badges

Comments

disinfor · Accepted Answer · 2019-12-03 19:54:44Z

There are multiple answers across Stack Overflow to do this. I couldn't find one that has three common in one answer (please mark the question as duplicate if there is).

First method: Flexbox

For this method, we can wrap your two elements in a parent container (flex-container) which makes the children flex items. This is similar to float elements, but keeps elements a little more predictable.

Each of the children - chart and form, have flex properties set: shrink, grow and basis. Grow is the ratio that it the element will grow in relation to other elements and it's parent.

Shrink is the opposite - the rate at which the element will shrink comparatively to other elements/parent.

Basis is the minimum width the element starts at. Think of it as the width property.

More reading on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flex-container {
  display: flex;
  flex-flow: row nowrap;
}

#chart_container {
  background: red;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 66.666%;
}

.form-popup {
  background: blue;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 33.333%;
}

<div class="flex-container">
  <div id="chart_container" #chart_container>
    <!-- <pan-zoom [config]="panzoomConfig"> -->
    <div class="flowchart-example-container" id="exampleDiv" #exampleDiv>
    Chart chart chart chart
    
    </div>
    <!-- </pan-zoom> -->
  </div>

  <div class="form-popup" id="myForm">
    <form action="/action_page.php" class="form-container">
      <h1>Login</h1>

      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <button type="submit" class="btn">Login</button>
      <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
    </form>
  </div>
</div>

Second method: Float

Using float, we can position elements next to each other. So we set float: left on each div. No need for a parent container. The thing to remember is the width's of the elements need to equal 100%. So, in this example, I use calc( 66.666% - 10px ) to account for the 10px margin on the chart. Luckily CSS does calculations for us.

#chart_container {
  float: left;
  width: calc( 66.666% - 10px);
  background: red;
}

.form-popup {
  float: left;
  width: 33.333%;
  background: blue;
}

<div id="chart_container" #chart_container style="margin-right: 10px;">
  <!-- <pan-zoom [config]="panzoomConfig"> -->
  <div class="flowchart-example-container" id="exampleDiv" #exampleDiv>
    Chart chart chart chart

  </div>
  <!-- </pan-zoom> -->
</div>

<div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Login</h1>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>

Third Method: Grid

This one is a bit more complex, but it's similar to flex, where you assign elements to a grid system.

I kept this very simple for your use, but overall, you have a parent element with display: grid and other properties that define the grid.

Here is some good reading: https://css-tricks.com/snippets/css/complete-guide-grid/

.grid-container {
  display: grid;
  grid-template-areas: "chart form";
  grid-template-columns: 66.666% 33.333%;
  grid-template-rows: 1fr;
}

#chart_container {
  background: red;
  grid-area: chart;
}

.form-popup {
  background: blue;
  grid-area: form;
}

<div class="grid-container">
  <div id="chart_container" #chart_container>
    <!-- <pan-zoom [config]="panzoomConfig"> -->
    <div class="flowchart-example-container" id="exampleDiv" #exampleDiv>
      Chart chart chart chart

    </div>
    <!-- </pan-zoom> -->
  </div>

  <div class="form-popup" id="myForm">
    <form action="/action_page.php" class="form-container">
      <h1>Login</h1>

      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <button type="submit" class="btn">Login</button>
      <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
    </form>
  </div>
</div>

That's a bunch to take in, but those are three methods you can use.

You're welcome. I know there are duplicates out there for float and flex solutions, but I couldn't find one with all three in one answer. Hopefully this helps others out!

Collectives™ on Stack Overflow

Positioning elements in HTML and CSS codes

4 Answers 4

Comments

Comments

Comments

First method: Flexbox

Second method: Float

Third Method: Grid

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

First method: Flexbox

Second method: Float

Third Method: Grid

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related