0

The header is aligning to the center, and the checkbox-div to the next line, what css should i use to align the checbox-div to the right end on the same line as the header!

Here is the sample code!

<div class="header-wrapper">
   <h2 class="header">Header</h2>
   <div class="checkbox-div">
     <input type="checkbox" class="checkbox" value="Some Value" id="checkbox">
     <label for="sub-folder-checkbox">Some Name</label>
   </div>
</div>

Currently the css am using is,

.header {
   text-align: center;
}

Thanks in advance!

Veno
  • 433
  • 2
  • 14

2 Answers2

2

Here is a flexbox Example using an empty div as a "spacer" Element. I left comments in the code that explain what the code below them does. I added colors to some elements so you can see what happens to them.

.header {
  text-align: center;
}
.header-wrapper {
  display: flex;
  /*We want 1 row and we dont want items to wrap into other rows*/
  flex-flow: row nowrap;
  width: 100%;
  background-color: green;
  /*Positions elements to the start, end and whatever is between while keeping some space between them */
  justify-content: space-between; 
  /*You can add this if you also want to horizontally align items*/
  align-items: center;
}
/*gives all divs (the spacer and the checbox-div) inside of the header-wrapper the same size and leaves the rest of space for the header, with this the header is centered and looks better*/
.header-wrapper div {
    width: 33%;
}
.checkbox-div {  
  background-color: red;
}
<div class="header-wrapper">
  <!--Add an empty container to fill in the place on the left-->
  <div class="empty-div"></div>
   <h2 class="header">Header</h2>
   <div class="checkbox-div">
     <input type="checkbox" class="checkbox" value="Some Value" id="checkbox">
     <label for="sub-folder-checkbox">Some Name</label>
   </div>
</div>

Here is a second snippet with a different solution, code is commented for explanation again.

    .header-wrapper {
      /*make the container a flex item and make it relative*/
      display: flex;
      position: relative;
      width: 100%;
      background-color: green;
      /*Center the header*/
      justify-content: center;
      /*if horizontal centering is required add this*/
      align-items: center;
    }
    .checkbox-div { 
    /*give the div an absolute position inside the parent container all the way on the right*/
      position: absolute;
      right: 0;
      background-color: red;
    }
    <div class="header-wrapper">
       <h2 class="header">Header</h2>
       <div class="checkbox-div">
         <input type="checkbox" class="checkbox" value="Some Value" id="checkbox">
         <label for="sub-folder-checkbox">Some Name</label>
       </div>
    </div>
Warden330
  • 999
  • 1
  • 5
  • 11
  • Is there any solution without adding new divs and without the width constraint to checkbox-div? – Veno Oct 06 '20 at 13:07
  • yeah there are several solutions to this. I edited the answer with a second one that uses css positioning inside a flex container without any fixed widths or additional elements. – Warden330 Oct 06 '20 at 13:12
  • 1
    Wow! That was awesome! And what's the purpose of postion: relative and width: 100%? – Veno Oct 06 '20 at 13:19
  • 1
    the width: 100% is just cause it looks stupid in the small preview window if its small :D you can change that or dont give it any fixed width. The position relative is necessary for the position absolute of the child-element to know which element it is reffering to. Without that the checkbox-div would see right:0 as the right side of the whole screen not of the div. https://css-tricks.com/absolute-positioning-inside-relative-positioning/ That should explain it :) – Warden330 Oct 06 '20 at 13:23
  • not the right side of the screen, the right side of the body i mean, sorry – Warden330 Oct 06 '20 at 13:25
  • Is there any case that the position relative for parent is not needed? Because for me it's working? I don't know how! – Veno Oct 06 '20 at 13:34
  • 1
    Well, when the header-wrapper has the same width as the body there wouldn't be a visual difference. But if you make the header-wrapper smaller the div should be outside of the header-wrapper when you dont give it position:relative – Warden330 Oct 06 '20 at 13:36
  • I got your point! And the last one, how will you bring to the next line, for media query like, header in the same position, and the checkbox-div to the next line right end? – Veno Oct 06 '20 at 13:42
  • you can just remove the position properties with media query and then it will wrap again. I personally love using Flexbox so i would set the flex-flow property of the .header-wrapper to "column nowrap" and it would be 1 like for each item sorted horizontally – Warden330 Oct 06 '20 at 14:15
  • How will you make the checkbox-div to the right end? in this case? – Veno Oct 06 '20 at 14:17
  • probably with justify-content, would have to see the full situation :) – Warden330 Oct 06 '20 at 14:48
2

I recommend using CSS grid (Basic Concepts of grid layout (on MDN)).

We make the wrapper a grid with three columns. The first column is ignored, the header goes into the second one and the checkbox div in the last one.

Then we align (vertical) and justify (horizontal) the grid items (i.e. the header and the div).

Note that I added borders to help see the boxes.

Also note that in your example code, the id of the checkbox doesn't match the for attribute on the label.

Here's the code:

.header-wrapper {
  display: grid;
  /* Creates three equally sized columns. */
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  /* Centering is done with this.
   * Also centers the div. */
   justify-items: center;
}

.header {
  grid-column: 2;
  border: 1px blue solid;
}

.checkbox-div {
  grid-column: 3;
  border: 1px red solid;
  /* If you don't want to center the checkbox div: */
  justify-self: end;
}
<div class="header-wrapper">
   <h2 class="header">Header</h2>
   <div class="checkbox-div">
     <input type="checkbox" class="checkbox" value="Some Value" id="sub-folder-checkbox" />
     <label for="sub-folder-checkbox">Some Name</label>
   </div>
</div>
Emaro
  • 1,397
  • 1
  • 12
  • 21