2

I'm trying to create a DIV with a "2 columns" text.

So I'm using the column-xxx properties but the column-fill set with "auto" doesn't seem to behave as expected. First column should be fullfilled before the second one instead of be equally balanced.

Even the example on w3schools doesn't behave as expected.

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-fill

Here it is my html page :

<html>
<body>
  <script src="js/scripts.js"></script>
  <div class="livre">
    <div class="cahier">
        <div id="tranche_g">
        </div>
        <div id ="feuillet">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec metus lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. Suspendisse enim massa, scelerisque vitae sagittis non, consectetur et velit. Vivamus placerat ligula a tortor efficitur mattis. Fusce eu arcu a metus rhoncus pretium in id elit. Nunc condimentum eleifend neque non vulputate. Integer varius scelerisque aliquam.</p>
        </div>
        <div id="tranche_d">
        </div>
    </div>
  </div>
</body>
</html>

And here it is my CSS code :

/* CSS was previously reset with meyerweb code
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
body, html {height: 100%}

body{
    background-color:Sienna;    
}

.livre{
    background-color: SaddleBrown;
    max-width: 1000px;
    margin: auto;
    border-left: 2px solid black;
    border-right: 2px solid black;
    position:relative;
    height: 100%;
}

.cahier{
    background-color:NavajoWhite;
    margin-left: 4%;
    margin-right: 4%;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    position: relative;
    height: 100%;
    width: 92%;
}

#tranche_g{
    position:relative;
    float:left;
    width: 2%;
    height: 100%;
}

#feuillet{
    position:relative;
    float: left;
    width: 87%;
    min-height: 100%;

    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    background-color:Bisque;

    padding-left: 1em;
    padding-right: 1em;

    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 2em; /* Chrome, Safari, Opera */
    -moz-column-gap: 2em; /* Firefox */
    column-gap: 2em;
    -webkit-column-rule: 1px solid; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid; /* Firefox */
    column-rule: 1px solid;
    -webkit-column-fill: auto; /* Chrome, Safari, Opera */
    -moz-column-fill: auto; /* Firefox */
    column-fill: auto;
}

#tranche_d{
    position:relative;
    float: right;
    width: 10%;
    height: 100%;
}

Any idea why "auto" is not working properly with column-fill property ?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Douglas
  • 5,229
  • 3
  • 43
  • 54
  • 2
    It looks like you need to set a fixed height on the element which you set columns to. So here replace `min-height` with `height` https://codepen.io/danield770/pen/RZwxjp – Danield Jul 24 '17 at 12:39

2 Answers2

1

Set height:100% for #feuillet

body,
html {
  height: 100%
}

body {
  background-color: Sienna;
}

.livre {
  background-color: SaddleBrown;
  max-width: 1000px;
  margin: auto;
  border-left: 2px solid black;
  border-right: 2px solid black;
  position: relative;
  height: 100%;
}

.cahier {
  background-color: NavajoWhite;
  margin-left: 4%;
  margin-right: 4%;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  position: relative;
  height: 100%;
  width: 92%;
}

#tranche_g {
  position: relative;
  float: left;
  width: 2%;
  height: 100%;
}

#feuillet {
  position: relative;
  float: left;
  width: 87%;
  min-height: 100%;
  height: 100%;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
  background-color: Bisque;
  padding-left: 1em;
  padding-right: 1em;
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  -webkit-column-gap: 2em;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 2em;
  /* Firefox */
  column-gap: 2em;
  -webkit-column-rule: 1px solid;
  /* Chrome, Safari, Opera */
  -moz-column-rule: 1px solid;
  /* Firefox */
  column-rule: 1px solid;
  -webkit-column-fill: auto;
  /* Chrome, Safari, Opera */
  -moz-column-fill: auto;
  /* Firefox */
  column-fill: auto;
}

#tranche_d {
  position: relative;
  float: right;
  width: 10%;
  height: 100%;
}
<html>

<body>
  <script src="js/scripts.js"></script>
  <div class="livre">
    <div class="cahier">
      <div id="tranche_g">
      </div>
      <div id="feuillet">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec
          metus lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. </p>
        
      </div>
      <div id="tranche_d">
      </div>
    </div>
  </div>
</body>

</html>
fen1x
  • 5,616
  • 6
  • 28
  • 39
  • Your code fixed the issue. Why can't I use the min-height attribut instead of height ? The problem now is that when the window is very small, no scrollbar appears but a third column appear despite I set column-count = 2. Why ? – Douglas Jul 24 '17 at 17:57
0

Please can you try below code.

In below code i have just added this thing only 

p{    
    -webkit-margin-after: 0em;
    -webkit-margin-before: 0em;
}

Because this is default style of the browser so it's effecting the 1'st column.So that's why we setted 0em instead of 1em.

    /* CSS was previously reset with meyerweb code
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
body, html {height: 100%}

body{
    background-color:Sienna;    
}

.livre{
    background-color: SaddleBrown;
    max-width: 1000px;
    margin: auto;
    border-left: 2px solid black;
    border-right: 2px solid black;
    position:relative;
    height: 100%;
}

.cahier{
    background-color:NavajoWhite;
    margin-left: 4%;
    margin-right: 4%;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    position: relative;
    height: 100%;
    width: 92%;
}

#tranche_g{
    position:relative;
    float:left;
    width: 2%;
    height: 100%;
}

#feuillet{
    position:relative;
    float: left;
    width: 87%;
    min-height: 100%;

    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    background-color:Bisque;

    padding-left: 1em;
    padding-right: 1em;

    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 2em; /* Chrome, Safari, Opera */
    -moz-column-gap: 2em; /* Firefox */
    column-gap: 2em;
    -webkit-column-rule: 1px solid; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid; /* Firefox */
    column-rule: 1px solid;
    -webkit-column-fill: auto; /* Chrome, Safari, Opera */
    -moz-column-fill: auto; /* Firefox */
    column-fill: auto;
}

#tranche_d{
    position:relative;
    float: right;
    width: 10%;
    height: 100%;
}
p{    
 -webkit-margin-after: 0em;
    -webkit-margin-before: 0em;
}
<div class="livre">
    <div class="cahier">
        <div id="tranche_g">
        </div>
        <div id ="feuillet">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec metus lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. Suspendisse enim massa, scelerisque vitae sagittis non, consectetur et velit. Vivamus placerat ligula a tortor efficitur mattis. Fusce eu arcu a metus rhoncus pretium in id elit. Nunc condimentum eleifend neque non vulputate. Integer varius scelerisque aliquam.</p>
        </div>
        <div id="tranche_d">
        </div>
    </div>
  </div>
Emipro Technologies Pvt. Ltd.
  • 14,598
  • 5
  • 45
  • 75