CODEWITHSUNDEEP
htmlcss
Doge
Doge

Reputation: 345

Dividing a single div tag into 3 sections

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

Upvotes: 0

Views: 974

Answers (2)

m59
m59

Reputation: 43745

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.

Upvotes: 3

bitoffdev
bitoffdev

Reputation: 3384

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>

Upvotes: 2

Related Questions