Have One div with two columns with different widths

Question

I am currently trying to have a single <div> with a huge text split into two columns which have different widths. example of what i want to create

You could say, split up your text into two <div>s, which is not possible since I also want to be able to adjust the widths when nessesary.

Let’s say my HTML file looks like this:

<style>
    #main-article{
        width: 100%;
        column-count:2;
        column-gap: 10vw;
        // webkit & moz stuff about columns
    }
</style>
<article id="main-article">
    really long text devided into two columns...
</article>

i don't mind if javascript or JQ is needed to sepperate the text into two divs

Sollutions that do not fit this case

the mentioned sollution in the comments would not work in my case since that will result into text being hidden in the overflow note the green in this screenshot resembles the visible text example

Are you wanting the second column with the overflowed text to fill the remaining width of the article row? — Larry Lane, Jan 27 '18 at 14:28
We also need to know more details missing in your question. How long is the text before it gets split into two columns and what do you mean by adjust the width when necessary? How were you planning on adjusting the width? — Larry Lane, Jan 27 '18 at 14:33
@LarryLane i made a mockup in indesign for what i am looking for [link](https://imgur.com/a/wzfzO) also the text will be around 400 to 600 words, i'm gonna have the width adjusted with a slider (in my testing, but will be useing an js to have an animation) — Odinh, Jan 27 '18 at 14:35
Related https://stackoverflow.com/questions/2453522/is-there-a-way-to-specify-different-widths-for-columns-in-css3 — sol, Jan 27 '18 at 14:39
The defined CSS selector does not match anything in your HTML markup. Use `article {...}` or `#article {...}`. Alternatively, you could change the `
`s id to `article`. — tao, Jan 27 '18 at 14:41
Given what @Odinh is saying about the slider to adjust the column widths, he could adjust it using js if he wants to. — Larry Lane, Jan 27 '18 at 14:43
@sol i've checked that out and all it seems to do is hide the overflow on the second column — Odinh, Jan 27 '18 at 14:43
@Odinh, what your question holds at this point works in all browsers as per your request. If it still does not in your project/app, you need to update the question with a [mcve], making sure you add enough to reproduce the problem. Please note you still have an error in CSS: `column-gap 10vw` should be `column-gap: 10vw` (mind the colon). — tao, Jan 27 '18 at 14:45
@LarryLane how would i make sure the text does not hide like in the example mentioned above/ — Odinh, Jan 27 '18 at 14:46
-1, it looks to me that little to none research has been done by OP. If something isn't working you should first look for alternatives, give it a day and then ask someone to take a look, that's in my opinion of course. — Vitaliy Terziev, Jan 27 '18 at 14:52
I don't see how you would get around having multiple elements to hold each column's content if you want different width columns. — Scott Marcus, Jan 27 '18 at 14:53
@VitaliyTerziev i've been looking into this for a while now, and couldn't figure it out, i've tried to have duplicate divisions where the margin would offset the text in the second div, though that works statically it didn't work dynamically — Odinh, Jan 27 '18 at 14:55
@ScottMarcus i'm fime having javascript or Jquery split the text into two divs if need be, though i could not find how to fill one div with text and then have the remainder text go into another div — Odinh, Jan 27 '18 at 14:56
I would give up the idea and go for DIVs //with different width// just divs. These days all needs to be mobile first so complex setup isn't the best way. You can also use a css framework, actually it would be best to use one and not to write it yourself. You don't need to reinvent the wheel. — Vitaliy Terziev, Jan 27 '18 at 15:04
@Odinh, if you don't want the text to be cut off you need to set a max-width on the element holding the text and you might try looking at some js features like text truncating. A similar technique is used when you see the read more links that show the rest of an article. You could calculate the the number of words or characters depending on how you want to do it using js and then remove the remainder and then add it to your second column if that makes sense. — Larry Lane, Jan 27 '18 at 15:04
@AndreiGheorghiu edited my question, gave examples of what i'm trying to acomplish and showed why the duplicate is not a sollution to my case — Odinh, Jan 27 '18 at 15:20
@Odinh: the original question's accepted answer ***clearly answers*** yours. Having CSS `columns` with different widths is not possible. Besides, you were supposed to research and find that question before asking yours. Please try to limit your questions to what has not been asked before. CSS `columns` is *cool* as it auto-divides the content so that your columns have equal heights, at the expense of them having equal widths. The only thing you can do is "break" with some elements (such as titles) by specifying `column-span:all`. That's all you've got. — tao, Jan 27 '18 at 15:29

score 2 · Answer 1 · answered Jan 27 '18 at 15:45

Use 2 divs and split the text by creating array of words and finding the index to slice them based on width percentages

var $article = $('#main'),
  words = $article.text().split(' ');

function setContent(leftPercent) {
  $article.html('<div id="main-left"></div><div id="main-right"></div>')
  var wordSplitIndex = Math.ceil((leftPercent / 100) * words.length),
    leftWords = words.slice(0, wordSplitIndex).join(' '),
    rightWords = words.slice(wordSplitIndex).join(' ');

  $('#main-left').width(leftPercent + '%').text(leftWords);
  $('#main-right').width((100 - leftPercent) + '%').text(rightWords)
}


$('button[data-left-percent]').click(function() {
  var leftPercent = $(this).data('left-percent')
  setContent(leftPercent)
})

#main {
  display: flex
}

#main>div {
  padding: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-left-percent="20">
left 20%
</button>
<button data-left-percent="60">
left 60%
</button>
<button data-left-percent="80">
left 80%
</button>


<article id="main">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
  duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</article>

I was about to say it could be done via JS. What about `column-span`, `column-gap` and all the rest of CSS `columns` properties? Not to mention content that has sensibly longer (or shorter) words at one end than the other... I'd try adding words from one stack to another until height difference changes from `+` to `-` and pick the case where the height difference is smaller. But adding `column-span` to it, that's a pain. :) — tao, Jan 27 '18 at 16:13
@AndreiGheorghiu sure this can be improved if absolutely needed. I only offered the basics — charlietfl, Jan 27 '18 at 16:21
@charlietfl you gave me an idea ill provide my question with my sollution — Odinh, Jan 27 '18 at 17:07

score 0 · Answer 2 · answered Jan 27 '18 at 14:38

0

You just need pass the same selectors which is define in html. (change the #article to #main-article). please check https://jsfiddle.net/subirbiswas/f8pb17gb/

answered Jan 27 '18 at 14:38

subir biswas

371
2
5
14

oh that's just my bad i typed it incorrect in this example i know it's ment to be #main-article in my example, will edit the question – Odinh Jan 27 '18 at 14:41
I did not know this property of the css! you know by chance to tell me if it is recommended for use considering compatibility with various browsers? thank you! – Pinguto Jan 27 '18 at 14:42
There isn't a way. Technically it's not possible to do it with the `multi-column-property`. The feature is designed for content that flows between equal columns. please see below stack link for more details https://stackoverflow.com/questions/2453522/is-there-a-way-to-specify-different-widths-for-columns-in-css3 – subir biswas Jan 27 '18 at 14:58
@Subir that will not work in my case see example above – Odinh Jan 27 '18 at 15:04

score 0 · Answer 3 · answered Jan 27 '18 at 14:45

Try out this code. I have included bootstrap version 4 as well in order to make sure it is responsive.

#article {
  width: 100%;
  column-count: 2;
  column-gap 10vw;
  margin: 1rem;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <article id="article">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
      ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
      augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</article>

  </div>
</div>

This will result in 2 columns with the same width, though i'd like to have 2 columns with different widths — Odinh, Jan 27 '18 at 14:50
I dont think it is possible from the references i found out. Check them out https://stackoverflow.com/questions/33888009/different-width-css-columns https://stackoverflow.com/questions/2453522/is-there-a-way-to-specify-different-widths-for-columns-in-css3?noredirect=1&lq=1 — Lakindu Gunasekara, Jan 27 '18 at 15:07

Odinh · Accepted Answer · 2018-01-27T17:49:57.773

thanks to charlietfl

this sollution came to be because of his sollution, note that in this codepen example it does not work on load though if you run it in your browser it does work propperly.

    var allcol = document.getElementsByClassName('col');
    var current = allcol[0];
    var one = allcol[0];
    var two = allcol[1];
    var txt = current.innerHTML;

    function ballance() {
        curr = allcol[0];
        var temp = txt;
        curr.innerHTML = "";
        one.innerHTML = "";
        two.innerHTML = "";
        var wrdArr = temp.split(' ');
        var i = 0;

        overflew = function(x) {
            var div = document.getElementById(x.id);
            return div.scrollHeight > div.clientHeight;
        }
        for (a in wrdArr) {
            curr.innerHTML = curr.innerHTML + (wrdArr[a] + ' ');
            if (overflew(curr)) {
                i++;
                curr = allcol[i];
            }
        }
        i = 0;
    }
    var slider = document.getElementById("range");
    slider.oninput = function() {
        one.style.width = (slider.value - 1) + "%";
        two.style.width = (100 - slider.value - 1) + "%";
        ballance();
    }
    ballance();

.col {
    height: 300px;
    float: left;
}

#col1 {
    width: 59.5%;
    height: 300px;
    margin-right: 1%;
}

#col2 {
    width: 39.5%;
}

#range {
    width: 100%;
}

<h3> slider to adjust the width</h3>
<input type="range" min="1" max="100" value="60" class="slider" id="range">
   <div class="col" id="col1">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio corporis necessitatibus excepturi provident ex repellat maiores perferendis dignissimos, deleniti quisquam at laudantium id quod distinctio libero in similique deserunt esse. Perferendis tenetur aliquam maiores itaque laudantium sapiente ad dolor quibusdam, impedit numquam voluptatibus temporibus esse dolores harum labore reprehenderit, neque inventore delectus, iure amet blanditiis. Hic facere assumenda, quae illum! Consequatur dolorum necessitatibus cum voluptatem, adipisci fugiat reiciendis nesciunt hic! Molestiae esse corporis omnis earum blanditiis maiores nam rerum, cupiditate, repudiandae recusandae inventore. Delectus saepe fuga eius quaerat! Quisquam, aperiam. Aliquam corporis omnis quis quibusdam cupiditate doloremque. Temporibus cumque ratione rerum ab sunt est quam quisquam id. Quam quasi, consequatur dignissimos, suscipit officiis qui voluptatibus consequuntur officia accusamus repellendus ab. Modi dolore dolorum facilis vitae dolores nemo sunt repellendus saepe distinctio voluptate consectetur minus eaque tenetur eligendi aliquid cum voluptatem praesentium quasi sed soluta, debitis possimus quae, nesciunt similique, molestias.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio corporis necessitatibus excepturi provident ex repellat maiores perferendis dignissimos, deleniti quisquam at laudantium id quod distinctio libero in similique deserunt esse. Perferendis tenetur aliquam maiores itaque laudantium sapiente ad dolor quibusdam, impedit numquam voluptatibus temporibus esse dolores harum labore reprehenderit, neque inventore delectus, iure amet blanditiis. Hic facere assumenda, quae illum! Consequatur dolorum necessitatibus cum voluptatem, adipisci fugiat reiciendis nesciunt hic! Molestiae esse corporis omnis earum blanditiis maiores nam rerum, cupiditate, repudiandae recusandae inventore. Delectus saepe fuga eius quaerat! Quisquam, aperiam. Aliquam corporis omnis quis quibusdam cupiditate doloremque. Temporibus cumque ratione rerum ab sunt est quam quisquam id. Quam quasi, consequatur dignissimos, suscipit officiis qui voluptatibus consequuntur officia accusamus repellendus ab. Modi dolore dolorum facilis vitae dolores nemo sunt repellendus saepe distinctio voluptate consectetur minus eaque tenetur eligendi aliquid cum voluptatem praesentium quasi sed soluta, debitis possimus quae, nesciunt similique, molestias.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio corporis necessitatibus excepturi provident ex repellat maiores perferendis dignissimos, deleniti quisquam at laudantium id quod distinctio libero in similique deserunt esse. Perferendis tenetur aliquam maiores itaque laudantium sapiente ad dolor quibusdam, impedit numquam voluptatibus temporibus esse dolores harum labore reprehenderit, neque inventore delectus, iure amet blanditiis. Hic facere assumenda, quae illum! Consequatur dolorum necessitatibus cum voluptatem, adipisci fugiat reiciendis nesciunt hic! Molestiae esse corporis omnis earum blanditiis maiores nam rerum, cupiditate, repudiandae recusandae inventore. Delectus saepe fuga eius quaerat! Quisquam, aperiam. Aliquam corporis omnis quis quibusdam cupiditate doloremque. Temporibus cumque ratione rerum ab sunt est quam quisquam id. Quam quasi, consequatur dignissimos, suscipit officiis qui voluptatibus consequuntur officia accusamus repellendus ab. Modi dolore dolorum facilis vitae dolores nemo sunt repellendus saepe distinctio voluptate consectetur minus eaque tenetur eligendi aliquid cum voluptatem praesentium quasi sed soluta, debitis possimus quae, nesciunt similique, molestias.
</div>
<div class="col" id="col2">

</div>

if you are interested in splitting the column by word count you can take a look at this example https://codepen.io/larryjoelane/pen/oEvjze?editors=1111 — Larry Lane, Jan 27 '18 at 23:21

Have One div with two columns with different widths

Sollutions that do not fit this case

4 Answers4

thanks to charlietfl