CODEWITHSUNDEEP
htmlcss
J. Vie
J. Vie

Reputation: 133

Side by side (inline) divs with dynamical width (CSS, no JavaScript)

Before marking [duplicated] make sure to understand the question.

I'm having trouble to find out the best way to have 2 divs side by side where the first one is dynamic to it's content which can be added and removed. Checking the actual code explains it way more than me. It's basically an editor where there's the lines counter and the code/text part.

JSFiddle and code snippet:

body, html {
  height: 100%;
  margin: 0px;
}

#editor {
  cursor: default;
  font-family: consolas;
  font-size: 12px;
  height: 100%;
  user-select: none;
}

#lines {
  background-color: #2e3436;
  color: #fff;
  display: inline-block;
  height: 100%;
  padding: 0 7px;
}

#text {
  background-color: #141414;
  color: #B5834A;
  cursor: text;
  display: inline-block;
  height: 100%;
  vertical-align: top;
  width: calc(100% - 34px);
}
<div id="editor">
  <div id="lines">
    <span>1</span>
    <br><span>2</span>
    <br><span>10</span>
    <br><span>etc</span>
  </div><div id="text">
    <span>&lt;html><br>// Code<br>&lt;/html></span>
  </div>
</div>

Right now I'm using width: calc(100% - 34px); which does not fix the problem of when I add/remove line numbers that make its div change width.

I have tried multiple values in the CSS property display. I suspect something related with tables would work but I would prefer a not workaround and no JavaScript if possible.

If you haven't understood the issue, just remove the 10 and the etc and you will notice a white space in the end of the editor/text div.

Result

Upvotes: 0

Views: 80

Answers (4)

Johannes
Johannes

Reputation: 67738

Put the .editor element inside the .text element, make it a floated block and give the .textelement 100% width:

body, html {
  height: 100%;
  margin: 0px;
}

#editor {
  cursor: default;
  font-family: consolas;
  font-size: 12px;
  height: 100%;
  user-select: none;
}

#lines {
  background-color: #2e3436;
  color: #fff;
  float: left;
  display: block;
  height: 100%;
  padding: 0 7px;
}

#text {
  background-color: #141414;
  color: #B5834A;
  cursor: text;
  display: inline-block;
  height: 100%;
  vertical-align: top;
  width: 100%;
}
<div id="editor">
 
  <div id="text">
   <div id="lines">
    <span>1</span>
    <br><span>2</span>
    <br><span>10000</span>
    <br><span>etc</span>
  </div>
    <span>&lt;html><br>// Code<br>&lt;/html></span>
  </div>
</div>

Upvotes: 1

pol
pol

Reputation: 2701

You can use flexboxes:

body, html {
  height: 100%;
  margin: 0px;
}

#editor {
  cursor: default;
  font-family: consolas;
  font-size: 12px;
  height: 100%;
  user-select: none;
  display: flex; /* add */
}

#lines {
  background-color: #2e3436;
  color: #fff;
  /*display: inline-block;*/
  height: 100%;
  padding: 0 7px;
}

#lines span {
  display: block; /*add and remove <br>s*/
}

#text {
  background-color: #141414;
  color: #B5834A;
  cursor: text;
  /*display: inline-block;*/
  height: 100%;
  /*vertical-align: top;*/
  width: 100%;
}
<div id="editor">
  <div id="lines">
    <span>1</span>
    <span>2</span>
    <span>10</span>
    <span>etc</span>
  </div><div id="text">
    <span>&lt;html><br>// Code<br>&lt;/html></span>
  </div>
</div>

Upvotes: 1

TriForce
TriForce

Reputation: 415

ive did myself using float for lines (to not use br's)

<div id="editor">
    <div id="lines">
        <span>1</span>
        <span>2</span>
        <span>10</span>
        <span>etc</span>
    </div>
    <div id="text">
        <span>&lt;html></span>
        <span>// Code</span>
        <span>&lt;/html></span>
    </div>
</div>

and display table properties to fit with all screen and get better alignments.

heres the example, works fine to me: https://jsfiddle.net/wkd0ssw3/

this will work in any navigator, be careful to use another properties like display:flex or calc, because may not work in all navigators...

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 205979

float instead of inline-block

body, html {
  height: 100%;
  margin: 0px;
}

#editor {
  cursor: default;
  font-family: consolas;
  font-size: 12px;
  height: 100%;
  user-select: none;
}

#lines {
  background-color: #2e3436;
  color: #fff;
  /*display: inline-block;  nooooo */
  float:left; /* yeeeeees */
  height: 100%;
  padding: 0 7px;
  text-align: right;  /* missing this :) */
}

#lines span{ display: block;} /* yeeeeyyy */

#text {
  background-color: #141414;
  color: #B5834A;
  cursor: text;
  /*display: inline-block; noooooo */
  /* width: calc(100% - 34px); noooooo */
  height: 100%;
  vertical-align: top;
}
<div id="editor">

  <div id="lines">
    <span>1</span>
    <span>2</span>
    <span>10</span>
    <span>etccccc</span>
  </div>
  
  <div id="text">
    <span>&lt;html><br>// Code<br>&lt;/html></span>
  </div>
  
</div>

Upvotes: 1

Related Questions