0

I want make two columns with text inside. Depending on where it will be more text box will increase the width, but height must be the same.

This is my code, and i don't know how to solved the problem.

https://jsfiddle.net/x0qqtr2y/

<div id="main>
  <div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
  <div class="cell2">SomeTEXTSomeTEXT</div>
</div>

#main {
    width:100%;
    background:gray;
    display:table;
    position:relative;
}
.cell1 {
    width:auto;
    height:auto;
    display:table-cell;
    background:red;
    float:left;
}

.cell2 {
    width:auto;
    height:auto;
    display:table-cell;
    float:left;
    background:blue;
}
m4n0
  • 29,823
  • 27
  • 76
  • 89
user3691753
  • 23
  • 1
  • 4
  • See my answer here regarding flex and flex-grow: https://stackoverflow.com/a/52975265/1599699 – Andrew Oct 24 '18 at 17:57

3 Answers3

3

use display:flex; on the parent element example below

CSS

#main {
width:100%;
display:flex;
}
.cell1 {
    background:red;
}

.cell2 {
    background:blue;
}

HTML on your main make sure you close the quote marks

<div id="main">
  <div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
  <div class="cell2">SomeTEXTSomeTEXT</div>
</div>

To learn more about flex use the link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Christian Andres
  • 31
  • 8
0

I would try this CSS, worked when I tried it in your Fiddle:

#main {
    width:100%;
    background:gray;
    position:relative;
}
#main div {
    display: inline;
}

.cell1 {
    background:red;
}

.cell2 {
    background:blue;
}
Denis B
  • 43
  • 4
0

Hi Because u miss (") id="main" below code working fine check it

CSS

#main {
width:100%;
background:gray;
}
.cell1 {
background:blue;
float:left;
}
.cell2 {

float:left;
background:red;
}

Html 

<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSome</div>
<div class="cell2">SomeTEXTSomeTEXT1</div>   
</div>
Abiramaraj
  • 13
  • 11