Question 258267 in CSS Question posted in
Some basic documentation can be found here.

Css – Two divs on the same line if there is space

I’m currently trying to save vertical space on my webpage and I’m trying to figure out if there’s an elegant solution to my problem.

I’ve created a ‘options’ component in angular that takes two optional templates. Here’s the relevant code:

  <div class="options-body">
    <div *ngIf="filterContent?.templateRef">
      <span class="option-title">Filters</span>
      <div class="filter-container">
        <ng-container [ngTemplateOutlet]="filterContent!.templateRef"></ng-container>
      </div>
    </div>

    <div class="actions-container" *ngIf="actionContent?.templateRef">
      <span class="option-title">Actions</span>
      <div>
        <ng-container [ngTemplateOutlet]="actionContent!.templateRef"></ng-container>
      </div>
    </div>
  </div>
</div>

The problem is that sometimes the templates are small in width, such as in this example:small width example

and sometimes it’s not:
large width example

I’m wondering if I could make the two divs inline if the width is small enough while maintaining the functionality the same (Here’s an example of desired solution for small width divs that i whipped up with paint):
desired small width example

Tags:

2

Answers


  1. 0

    use 50% fixed width for both div. Or use bootstrap row column to keep equal the both divs

    Login or Signup to reply.
  2. 0

    using css flex

    .content{
  display:flex;
  flex-wrap:wrap; //<--this is the key
  justify-content:flex-start
  
}
.wrapper-input{
  display:block;
  margin-right:1rem;
}
.wrapper-input label{
    display:block;
}

    e.g.

    <div class="content">
  <div class="wrapper-input">
     <label>one</label>
     <input>
  </div>
  <div class="wrapper-input">
     <label>two</label>
     <input>
  </div>
  <div class="wrapper-input">
     <label>three</label>
     <input>
  </div>
</div>

    stackblitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search