Inline css add style issue

Asked Nov 22 '21 at 09:35

Active Nov 22 '21 at 23:44

Viewed 26 times

I have created Two Equal Columns on the page, I don't want to use Internal CSS. So that, I add box-sizing: border-box; in the inline CSS, below is my coding:

<h2>Two Equal Columns</h2>

<div class="row" style="box-sizing: border-box;">
  <div class="column" style="float: left;width: 50%;padding: 10px;height: 300px;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="float: left;width: 50%;padding: 10px;height: 300px;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

But the result is shown like below:

Actually, I want the output like below:

Hope someone can guide me on how to solve this problem. Thanks.

edited Nov 22 '21 at 23:44

Priyanka Vadhwani

asked Nov 22 '21 at 09:35

David Holly

box-sizing on the elements not their parent – Temani Afif Nov 22 '21 at 09:39
@Temani Afif Ok. So how to add in the inline style? – David Holly Nov 22 '21 at 09:42
1

I don't think that this question should've been closed or quoted as a [duplicate]. Well instead of using floats, Use `display: flex;` on the row class : `.row{ display: flex; }` – RudyTheWebDev Nov 22 '21 at 09:47
1

@RudyTheWebDev automatically using display:flex everywhere is the worst answer. You are hiding the issue under another issue and the OP will understand nothing. – Temani Afif Nov 22 '21 at 13:34
Ok. Thanks your answer. – David Holly Nov 22 '21 at 15:05

Inline css add style issue

0 Answers0