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>
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 am trying to lay out a container in multiple columns, but have one heading span all the columns.
Unfortunately, the column-span CSS3 property is not (yet) supported by Firefox, so I'm looking for an alternate implementation that does not use column-span, and I thought it should be possible with flex.
This is the HTML I have to work with. I cannot modify the HTML by wrapping parts of it in sub-containers. As such, I'm looking for a CSS solution (or perhaps js).
<div id="wrapper">
<h2>Headline</h2>
<h3>Item title</h3>
<p>Nulla eum futurum demonstraverunt possim mazim. Wisi esse in congue littera iusto. Eu diam ea augue vero ii. </p>
<h3>Item 2 title</h3>
<p>Aliquam parum nam doming eodem amet. Legere blandit duis nisl in diam. Dignissim dolore dolore vulputate accumsan laoreet.
</p>
<h3>Item 3 title</h3>
<p>Parum erat est quam etiam suscipit. Habent ullamcorper iriure nulla eros lius. Elit etiam gothica demonstraverunt mirum duis. Dolor blandit parum notare soluta aliquam. Consequat iusto suscipit lobortis usus lorem. Quarta tempor typi te modo videntur.
</p>
<h3>Item 4 title</h3>
<p>Eu laoreet decima est est at. Parum anteposuerit notare molestie typi nonummy. Claritatem quod quam dolor saepius qui. Et in processus et tincidunt typi. Cum augue facilisi liber ad doming. Hendrerit eorum per eleifend vero mirum. Decima laoreet nulla dolore tincidunt iusto. Eleifend parum aliquam ut dolore facilisis. Volutpat modo in in zzril nunc.
</p>
<h3>Item 5 title</h3>
<p>Clari mirum odio qui quam euismod. At fiant tempor zzril in autem. Facit nonummy dignissim eros notare nulla. Exerci qui in zzril ex qui. Dignissim et saepius at anteposuerit hendrerit. Congue videntur congue augue est dynamicus. Imperdiet legunt lorem dolore dolore in. Mazim typi mazim habent volutpat magna. Accumsan habent lobortis hendrerit me lobortis.
</p>
<h3>Item 6 title</h3>
<p>Sed in claritas dolor eu volutpat. Nostrud insitam magna dolore typi exerci. Esse veniam velit esse esse anteposuerit.
</p>
<h3>Item 7 title</h3>
<p>Odio iis commodo insitam et nobis. Euismod commodo legere eodem commodo clari. Consectetuer Investigationes eodem quod wisi facit. Nibh id claram iriure praesent qui. Ut non modo zzril claram claram. Et est est wisi typi quinta.
</p>
</div>
The following snippet shows the desired output, by using columns and column-span:
#wrapper {
columns: 3;
}
h2 {
border-bottom: 1px solid #666666;
column-span: all;
}
<body>
<div id="wrapper">
<h2>Headline</h2>
<h3>Item title</h3>
<p>Nulla eum futurum demonstraverunt possim mazim. Wisi esse in congue littera iusto. Eu diam ea augue vero ii.</p>
<h3>Item 2 title</h3>
<p>Aliquam parum nam doming eodem amet. Legere blandit duis nisl in diam. Dignissim dolore dolore vulputate accumsan laoreet.
</p>
<h3>Item 3 title</h3>
<p>Parum erat est quam etiam suscipit. Habent ullamcorper iriure nulla eros lius. Elit etiam gothica demonstraverunt mirum duis. Dolor blandit parum notare soluta aliquam. Consequat iusto suscipit lobortis usus lorem. Quarta tempor typi te modo videntur.
</p>
</div>
</body>
Here is a codepen with my attempt at using flex: http://codepen.io/fulv/pen/bZOWVY
Again, here is the CSS:
html {
height: 100%;
}
body {
height: 100%
}
#wrapper {
display: flex;
flex-flow: column wrap;
max-height: 100%;
width: 100%;
}
#wrapper > * {
flex: 1 1 30%;
width: 30%;
}
h3 {
page-break-after: avoid;
break-after: avoid;
}
h2 {
flex: 0 0 100%;
border-bottom: 1px solid #666666;
}
The problem is the h2 Headline: I cannot figure out how to make it stretch across the three columns.
A secondary problem is how to make the h3s and the following ps not break across column boundaries.
The flex order property can be very handy. No changes to the HTML.
#wrapper {
display: flex;
flex-wrap: wrap;
}
h2 {
flex: 0 0 100%;
border-bottom: 1px solid #666666;
}
h3 {
order: 1;
flex: 0 0 33%;
}
p {
order: 2;
flex: 0 0 33%;
}
<div id="wrapper">
<h2>Headline</h2>
<h3>Item title</h3>
<p>Nulla eum futurum demonstraverunt possim mazim. Wisi esse in congue littera iusto. Eu diam ea augue vero ii.</p>
<h3>Item 2 title</h3>
<p>Aliquam parum nam doming eodem amet. Legere blandit duis nisl in diam. Dignissim dolore dolore vulputate accumsan laoreet.
</p>
<h3>Item 3 title</h3>
<p>Parum erat est quam etiam suscipit. Habent ullamcorper iriure nulla eros lius. Elit etiam gothica demonstraverunt mirum duis. Dolor blandit parum notare soluta aliquam. Consequat iusto suscipit lobortis usus lorem. Quarta tempor typi te modo videntur.
</p>
</div>
Revised Codepen
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>
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.