I have problems with 2 divs beside each other

user_17327032 0
Viewed 89

I want to create a dashboard for our upcoming deliveries.

Now I'm nearly done with just one problem. On the left side I want to show the name of the deliverer and in the middle there are some quick notes for the workers. It works but the middle text is aligned in order to the text length of the deliverer name.

My CSS:

.taskboardesc {
    padding:5px 400px 2px;
    left: 400px;
    top: 22px;
    /*margin-bottom:10px;*/
    display:inline-block;
}
.taskboardheader {
    display:inline-block;
    /*display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;*/
    margin-bottom:20px;
    padding:10px 5px 2px;
}

My PHP code:

<div class="taskboardheader">
    <?= $this->url->link($this->text->e($task['title']), 'TaskViewController', 'readonly', array('task_id' => $task['id'], 'token' => $project['token'])) ?>
    <div class="taskboardesc">
        <?= $this->text->markdown($task['description']) ?>
    </div>
    <div class='task-board-date1'>
        <?php if (! empty($task['date_due'])): ?>
            <span class="task-date
                <?php if (time() > $task['date_due']): ?>
                        task-date-overdue
                <?php elseif (date('Y-m-d') == date('Y-m-d', $task['date_due'])): ?>
                        task-date-today
                <?php endif ?>
                ">
                <i class="fa fa-calendar"></i>
                <?= $this->dt->datetime($task['date_due']) ?>
            </span>
        <?php endif ?>
    </div>
</div>

Here is a screenshot of the problem:

Here is a screenshot of the problem

So how did I get the text fixed in the middle without being interrupted of the text length from the left text.

css html
2 Answers

Many ways to do that. With grid, flex box or table. I would always use a table for such presentations. that is what they are there for. But I think you might need a quick solution.

If you will fix it fast, then you flex. You have to add to wrap container (in your case would be taskboarddesc) the style attribute display: flex instead block-inline.

simple example for visualisation only. I have thrown out the PHP code.

.taskboardesc {  
  width: 50%;  
}

.link, .task-board-date1 {
  width: 25%;  
}

.link, .task-board-date1, .taskboardesc {
  padding: 20px;
}

.taskboardheader {
  background: green;
  color:white;
  display:flex;
}

.odd {
  background: yellow;
  color: black;
}
<div class="taskboardheader">
  <div class="link">
    LINK
  </div>
    <div class="taskboardesc">
        Description Description Description Description
        Description Description Description Description
        Description Description Description Description
        Description Description Description Description
        Description Description Description Description
    </div>
    <div class='task-board-date1'>
        DATE
            <span class="task-date">
                <i class="fa fa-calendar"></i>
                DATE
            </span>        
    </div>
</div>
<div class="taskboardheader odd">
  <div class="link">
    LINK
  </div>
    <div class="taskboardesc">
        Description Description Description Description
        Description Description Description Description
        Description Description Description Description
        Description Description Description Description
        Description Description Description Description
    </div>
    <div class='task-board-date1'>
        DATE
            <span class="task-date">
                <i class="fa fa-calendar"></i>
                DATE
            </span>        
    </div>
</div>

user_148071110

You can use flexbox to layout your items:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: light-blue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
      <div id="wide">Wide (rest of width)</div>
      <div id="narrow">Narrow (200px)</div>
    </div>

This is basically just scraping the surface of flexbox. Flexbox can do pretty amazing things.

For older browser support, you can use CSS float and a width properties to solve it.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

NOTE:- Up-vote it if it helps you

user_164376050
Related