CODEWITHSUNDEEP
htmlcss
M_eight
M_eight

Reputation: 201

How to avoid unwanted line breaks when having parallel columns?

I wanted to centralize parallel columns. So that's why I'm using a wrapper. However when I want to have a margin-top or a line break in one single column, it affects the parallel columns as well, which I do not want to be affected.

<div class="row">
    <div class="column">
        <div class="column-header">
            <br>
            <p>A header</p>          
            <p>Some text</p>
        </div>
    </div>
        <div class="column">
            <div class="column-header">
                <p>A header</p>
            </div>
        </div>
        <div class="column">
            <div class="column-header">
                <p>A header</p>
            </div>
        </div>
        <div class="column">
            <div class="column-header">
                <p>A header</p>
            </div>
       </div>
   </div>
</div>

Now it looks like this:

A header A header A header A header

Some text

I want it to be like this:

         A header   A header   A header

A header

Some text

Upvotes: 1

Views: 103

Answers (1)

Monarchis
Monarchis

Reputation: 101

The one way is using Bootstrap and the css classes .row and .col-md-4 or just use a table-tag in your html code instead of div's.

If you want to become your page responsive, use Bootstrap. Else use the table tag.

Boostrap

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></head>
<body>

  <div class="row">
      <div class="col-md-4"> Text1 or other div's </div>
      <div class="col-md-4"> Text2 or other div's </div>
      <div class="col-md-4"> Text3 or other div's </div>
  </div>
  <div class="row">
      <div class="col-md-12">Another Text and row</div>
  </div>
</body>
</html>

Table-Tag 

<table width="100%" style="text-align:center;">
  <tr>
    <td> Text 1 </td>
    <td> Text 2 </td>
    <td> Text 3 </td>
  </tr>
  <tr>
     <td colspan="3" style="text-align: left;"> Text 4 </td>
  </tr>
</table>

I hope that is your desired answer.

Regards.

Upvotes: 2

Related Questions