Two columns with html

Using multi-column layouts

The properties defined in the CSS multi-column layout module extend the block layout mode , enabling the easy definition of multiple columns of text. People have trouble reading text if lines are too long. If it takes too long for the eyes to move from the end of one line to the beginning of the next, readers can lose track of which line they were on. To provide for a better user experience when reading text making use of a large screen, you should limit the width of text by using columns of text placed side by side, just as newspapers do.

Using columns

Column count and width

Two CSS properties control whether and how many columns will appear: column-count and column-width .

The column-count property sets the number of columns to a particular number. E.g.,

Example 1

HTML

div id="col"> p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p> p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. p> p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. p> p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p> div> 

CSS

Result

The content will be displayed in two columns:

The column-width property sets the minimum desired column width. If column-count is not also set, then the browser will automatically make as many columns as fit in the available width.

Example 2

HTML

div id="wid"> 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

Result

In a multi-column block, content automatically flows from one column into the next as needed. All HTML, CSS, and DOM functionality is supported within columns, as are editing and printing.

The columns shorthand

You can use either column-count or column-width . Because values for these properties do not overlap, it is often convenient to use the shorthand columns .

Example 3

In this example, the CSS declaration column-width: 12em is replaced by columns: 12em .

HTML

div id="col_short"> 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

Example 4

In this example, the CSS declaration column-count: 4 is replaced by columns: 4 .

HTML

div id="columns_4"> 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

Result

Example 5

The two CSS declarations column-width: 8em and column-count: 12 can be replaced by columns: 12 8em . The column-count portion of the shorthand is the maximum number of columns that will be present. The column-width is the minimum width each column should be.

HTML

div id="columns_12"> 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_12  columns: 12 8em; > 

Result

Assuming a default 1em gap between columns, if the container is wider than 103ems (12 columns * 8em width each + 7 1em gaps), there will be 12 columns, each with a width of 8ems or more. If the container is less than 103ems wide, there will be fewer than 12 columns. If the container is less than 17ems wide ( 8em column + 8em column + 1em gap), the content will be displayed as a single column with no column gap.

Height balancing

CSS columns require that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.

However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.

Column Gaps

There is a gap between columns. The recommended default is 1em . This size can be changed by applying the column-gap property to the multi-column block:

Example 6

HTML

div id="column_gap"> 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

#column_gap  column-count: 5; column-gap: 2em; > 

Result

Conclusion

CSS columns are a layout primitive that can help make large blocks of text easier to read when responsive content is viewed on wide viewports. Imaginative developers may find many uses for them, especially in conjunction with container queries and with the automatic height balancing feature.

Found a content problem with this page?

This page was last modified on Jun 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

How To Create a Responsive Two Column Layout in HTML and CSS

As a web developer, you have a variety of layout you can use to present content on a website.

You can use a two column layout to display:

• Related content for example a list of features, pricing cards, testimonials.
• Additional content for example sidebar with newsletter, related posts, author’s bio.
• Two separate products or services from one creator for example a photography who is also a designer can choose to create a single website with both services on it.

A two column layout is commonly used on screen wider than smartphone screen that is tablet, desktop and wide screen. With responsive design, the two columns are reorganized into one column on smartphone screens.

Using a two columns layout, you can split and structure the content into related sections.

Content in the same section with the same background appear to be relate.

Content in same section but different background appear to be contrasted with each other.

This helps the reader to navigate your website smoothly.

How to divide a div into two columns in HTML and CSS

1. Two equal columns Layout HTML CSS

a. Using CSS Float

 
 
/// Column 1: Put any relevant content here ///
 
/// Column 2: Put any relevant content here ///
 
 

.columns < Width: 100%; >.column < width:100%; >@media (min-width: 48em) < .column < width: 50%; float:left; >.columns < content: ""; display: table; clear: both; >> 

b. Using Flexbox

 
 
/// Column 1: Put any relevant content here ///
 
/// Column 2: Put any relevant content here ///
 
 

c. 2 equal columns layout Using CSS Grid

 
 
/// Column 1: Put any relevant content here ///
 
/// Column 2: Put any relevant content here ///
 
 

d. Two Column Layout Using Bootstrap

Add Bootstrap links in your section:

 
 
 
One of three columns
 
One of three columns
 
One of three columns
 
 
 

e. Two Equal Columns Using Bulma

Add Bulma link in your section:

Then add the following HTML code within your tags.

 
 
First column
 
Second column
 
 

2. Create Sidebar Layout: Two column layout

a. Create sidebar layout CSS

 
 
/// Column 1: Put any relevant content here ///
 
/// Column 2: Put any relevant content here ///
 
 

.columns < Width: 100%; >.column-1, .column-2 < width:100%; >@media (min-width: 48em) < .column-1 < width: 70%; float:left; >.column-2 < width: 30%; float:left; >.columns < content:""; display: table; clear: both; >> 

b. Create Sidebar Layout with Flexbox

 
 
/// Column 1: Put any relevant content here ///
 
/// Column 2: Put any relevant content here ///
 
 

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

Recent Posts

Источник