CODEWITHSUNDEEP
htmlcssruby-on-rails
Arw50452
Arw50452

Reputation: 325

Keeping DIV Blocks on the Same Line

Using Rails, I have a page that displays the value of two string variables side by side with two total columns. Below that variable are some DIV blocks. When rendered, the variable will output 1 line of text in some cases, and more than 1 line of text in others.

Currently, the DIV blocks below the variable are lined up only if each variable outputs the same number of text lines. If each variable outputs different numbers of text lines, the DIV blocks that follow won't be lined up.

Here's a simplified example of what the code looks like:

<div class="row">
    <div class="col-md-6">

        <%= @variable.text %>

        <!-- This div block needs to be aligned with the one in the other column, no matter how much text is outputted above. -->
        <div>
            <p>Content</p>
        </div>

    </div>

    <div class="col-md-6">

        <%= @variable.text %>

        <!-- This div block needs to be aligned with the one in the other column, no matter how much text is outputted above. -->
        <div>
            <p>Content</p>
        </div>

    </div>

</div>

I'm wondering how I could go about forcing the first two DIV blocks to always be lined up with each other, regardless of how many lines of text are displayed above them.

Upvotes: 0

Views: 110

Answers (2)

lugolabs
lugolabs

Reputation: 589

This looks like tabular data, so I would go with a table:

<table>
  <tr>
    <td><%= @variable.text %></td>
    <td><%= @variable.text %></td>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
  </tr>
</table>

You also get the benefit of the cells extending with the content.

Upvotes: 0

iMacTia
iMacTia

Reputation: 671

Split the structure into 2 rows:

<div class="row">
    <div class="col-md-6">

        <%= @variable.text %>

    </div>

    <div class="col-md-6">

        <%= @variable.text %>

    </div>

</div>
<div class="row">
    <div class="col-md-6">
        <div>
            <p>Content</p>
        </div>
    </div>
    <div class="col-md-6">
        <div>
            <p>Content</p>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions