i've the below html code
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-moz-column-count:2;
/* Firefox */
-webkit-column-count:2;
/* Safari and Chrome */
column-count:2;
-moz-column-gap:40px;
/* Firefox */
-webkit-column-gap:40px;
/* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff;
/* Firefox */
-webkit-column-rule:4px outset #ff00ff;
/* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
.newspaper1 {
-moz-column-count:3;
/* Firefox */
-webkit-column-count:3;
/* Safari and Chrome */
column-count:3;
-moz-column-gap:40px;
/* Firefox */
-webkit-column-gap:40px;
/* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff;
/* Firefox */
-webkit-column-rule:4px outset #ff00ff;
/* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule property.</p>
<div class="newspaper">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. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
<div class="newspaper1">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. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
</body>
</html>
http://jsfiddle.net/isherwood/29GHW/
here when i run it i get a 2 column layout, followed by 3 column. but here my problem is, in 3 column layout, i want the left column to take 80% of the width and the second column to take 20% of the width, please let me know how do i achieve this.
Thanks
I think that is not possible.
From here:
column-space-distribution
This property describes how to distribute space in the case where CWPB is smaller than the content width of the element.
And column-width-policy
This property describes how to interpret 'column-width'. The 'flexible' value indicates that the width of columns can be increased to fill all the available space. The 'strict' value indicates that 'column-width' is to be honored.
They are not implemented in the most of the browsers, and there is nothing specified about fixed percentage in the documentation.
Related
In bootstrap4 how to have a MSWORD type multicolumn text flowing
eg in word we have:
In bootstrap4 the below code will craete a two column grid
eg:
<div class="row">
<div class="col-6">
...... some text
</div>
<div class="col-6">
...... text
</div>
</div>
but here manually i have to split the text into two columns
How can this be down more automatically
No need Bootstrap for this, native CSS is enough!
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div class="newspaper">
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
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. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
I am not sure you need Bootstrap, instead CSS can handle this.
CSS Class:
.two-column-text {
column-count: 2;
}
HTML:
<div class="two-column">
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.
</div>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.two-column-text {
column-count: 2;
}
</style>
</head>
<body>
<div class="two-column-text">
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.
</div>
</body>
</html>
Reference
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want text to automatically go from the left column to the right column once it gets full. Thank you for your help, I am a beginner.
For example:
rhjssjskdjdjdkdjdj. Rhejejejejejejejdj
ehshsjskejekemek. Hrjejejesusjejsjs
aososskskskksskk
You can first set the CSS property column-count to specify the number of columns you need. The default behavior is to balance the amount of text in all the columns. However, if you specify a height on your container and then use the CSS column-fill property and set this to auto, the text will only go to subsequent columns once it reaches the container's height. You will need to play around with the height of your container to get the effect you're looking for.
.columns {
height: 220px;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-moz-column-fill: auto;
column-fill: auto;
}
<div class="columns">
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. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
I want these columns responsive if the screen size is small i want them to break downwards and adjust width 100% on small screen.
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
text-align:left;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>
<div class="newspaper">
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.
</div>
</body>
</html>
You can achieve this using media queries in css.
.newspaper {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
text-align: left;
}
/* max-width value depend on at which resolution you need text in single column, As for now to achieve that in mobile I have used 767px */
#media (max-width: 767px) {
.newspaper {
-webkit-column-count: 1;
/* Chrome, Safari, Opera */
-moz-column-count: 1;
/* Firefox */
column-count: 1;
}
}
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>
<div class="newspaper">
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.
</div>
Try this
#media screen and (max-width: 767px)
{
.newspaper {
-webkit-column-count:1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
column-count: 1;
}
}
Is there any chance to have one 2 column paragraph with different heights in CSS? I have a fix height and would like to fill it left to right column.
this is what I want vs. what I got
I played around with column-count and column-fill but it ended up in the trash.
column-count=2 will merely divide the entire set of text into two halves of equal height and hence that is why you are getting that result.
You can achieve the desired result by creating separate divs for both columns within the parent div.
Alternative solution without column-count:
.main {
width:100%;
}
.main > div{
width: 48%;
display: inline-block;
vertical-align: top;
text-align: justify;
}
.main > div:nth-child(1){
margin-right: 2%;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="main">
<div>
<p>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. Typi non habent claritatem insitam;</p>
</div>
<div>
<p> est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
</div>
</div>
</body></html>
Essentially, what I want is sort of 3 sections on a page. There would be a div element with content in it. The problem is, making the div break into 3 pieces, sort of like a newspaper, where once the content reaches the bottom, it wraps around and goes into the next box.
No code, I haven't started yet.
Edit: I want to make columns
CSS Columns: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts
Example:
.columns-3 {
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
}
<div class="columns-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
CSS columns are awesome! I made a demo also (click).
For older browsers, you would need javascript. Check out Masonry, Isotope and Packery.
Use css column-count or columns.
IE 9 and older don't support the column-count property.
CSS:
.columns{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
OR
.columns{
columns:3;
-webkit-columns:3; /* Safari and Chrome */
-moz-columns:3; /* Firefox */
}
HTML
<div class="columns">
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. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>