-1

Trying to have it to where these elements appear on the same exact line. So the header of "Header" will be on the left and the button to submit will be on the right.

<div>
  <div width="float: left; width: 50%">
    <h4> Header </h4>
  </div>
  
  <div style="float: right; width: 50%">
    <button> Export to Excel </button>
  </div>
</div>

enter image description here

I have used similar setup in the past and it worked. Any ideas?

isherwood
  • 58,414
  • 16
  • 114
  • 157
user68288
  • 702
  • 2
  • 6
  • 27

2 Answers2

2

To align two items next to eachother you need to make sure you assign them both a 50% width and you can get them both on the same line using align: left. This method works, but I suggest looking into flexbox for positioning, this makes it much easier.

.wrapper {
  width: 50%;
  float: left;
}
<div>
    <div class="wrapper">
      <h4>
        Header
      </h4>
    </div>
    <div class="wrapper">
        <button
        cButton
        (click)="exportExcel(1)"
        >
        Export to Excel
        </button>
    </div>
  </div>

Flexbox:

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.wrapper {
  flex-direction: column;
  flex: 1;
}

.wrapper button {
  width: 125px;
}
<div class="parent">
    <div class="wrapper">
      <h4>
        Header
      </h4>
    </div>
    <div class="wrapper">
        <button
        cButton
        (click)="exportExcel(1)"
        >
        Export to Excel
        </button>
    </div>
  </div>
FUZIION
  • 1,606
  • 1
  • 6
  • 19
1

If you are going to use float, the right column needs to be first

<div>
    <div style="float: right; width: 50%">
        <button
        cButton
        (click)="exportExcel(1)"
        >
        Export to Excel
        </button>
    </div>
    <div width="float: left; width: 50%;">
      <h4>
        Header
      </h4>
    </div>
  </div>

Using Flex

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
<div class='row'>
  <div class='column'>
    <h4>
      Header
    </h4>
  </div>
  <div class='column'>

    <button cButton (click)="exportExcel(1)">
        Export to Excel
        </button>

  </div>
</div>
epascarello
  • 204,599
  • 20
  • 195
  • 236
  • Nice! But you do not have to assign display flex to a child of a flexbox attribute. Only `flex-direction: column;` and `flex: 1;` are sufficient enough to get the same effect. – FUZIION Sep 20 '22 at 14:27
  • Surely you knew that this was a duplicate many times over. – isherwood Sep 20 '22 at 14:29