Html 2 col layout

Simple 2 column CSS layout

This is a tutorial on how to use CSS to create a simple two column layout. If you want to create a three column layout, read on as this tutorial explains a basic concept that can be used to create as many columns as you need.

The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.

To see the full CSS used for each step, view source on the example documents.

1. Basic structure

First of all, we create the basic HTML structure:

After that, we put some content in the different sections:

Now we have a completely unstyled HTML document which is structured in a way that lets us use CSS to control its layout.

2. Adjust the body and html elements

To make the content reach the edges of the browser window, we set the margin and padding of the body and html elements to zero. We also specify colours for text and background.

3. On to the main containers

After that it’s time to give the content area a width and center it horizontally. We do that by specifying the width and margins of the main container, #wrap . We also give it a background colour to make it show up on the page.

The method we use to center the content is based on the fact that when an element’s left and right margins are set to auto , they will share whatever is left when the element’s width has been subtracted from that of its container. In this case the width of #wrap will be subtracted from the width of the browser window.

Note: for this method to work in Internet Explorer (version 6 and later only), the document must use a DOCTYPE that forces IE to use its standards mode. Please read Fix Your Site With the Right DOCTYPE! for more info.

In case you’re wondering why we’re not using the body element to control the width and centering of the layout, it is because doing so can cause unwanted side-effects in some versions of Internet Explorer.

After that, we give the different sections of the document different background colours to make them show up.

4. Place the columns side by side

To make the two columns ( #main and #sidebar ) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.

Note that the sum of the widths should be equal to the width given to #wrap in Step 3.

This will make #sidebar appear to the right of #main , but the footer is not where it should be.

5. Push the footer down

The footer doesn’t get pushed down to the bottom of the content because of the way float works. When you float an element, it is removed from the document flow and doesn’t push elements that follow it down. In this case #footer will start right below #sidebar .

To avoid this we use the clear property to tell the footer that it can’t have any elements next to it.

6. Fix the background colour

Now we can see that the shorter column doesn’t continue all the way down to the footer. To make it look like it does, we use the same background colour for #sidebar and #wrap .

Also, if you take a look at this step in Internet Explorer 6 you may notice that the background colour of the footer is pushing up beside the main content. That will be taken care of later.

If you don’t know which column is going to be the tallest, and you want both columns to have different backgrounds and look like they are going all the way to the bottom, you need to use a workaround. There are several ways to achieve that effect:

7. Make the navigation bar horizontal

#nav contains a regular unordered list of links. Since we don’t want it to look like an unordered list we restyle it.

8. Adjust margins and paddings, and make IE 6 cooperate

Almost done. Time to adjust the margin and padding of some elements to make the layout a little less cramped.

1. #header
2. padding:5px 10px;
3. background:#ddd;
4. >
5. h1
6. margin:0;
7. >
8. #nav
9. padding:5px 10px;
10. background:#c99;
11. >
12. #main
13. float:left;
14. width:480px;
15. padding:10px;
16. background:#9c9;
17. >
18. h2
19. margin:0 0 1em;
20. >
21. #sidebar
22. float:right;
23. width:230px;
24. padding:10px;
25. background:#99c;
26. >
27. #footer
28. clear:both;
29. padding:5px 10px;
30. background:#cc9;
31. >
32. #footer p
33. margin:0;
34. >

One thing to take note of here is that when we added padding to #main and #sidebar , we subtracted the width of the left and right paddings from each element’s width . This is how the CSS box model works – for more details on that, see Internet Explorer and the CSS box model.

And the final thing is to compensate for a float bug in Internet Explorer 6. If you look at step 6 in IE 6, you’ll notice that the footer is not always being pushed completely below #main . Scroll up and down a couple of times if you can’t see it immediately.

It is very noticeable in this demo because every major element has a different background colour and everything is really tight. One way of fixing this problem is making sure the footer has an Internet Explorer concept called Layout. There are several ways of achieving this, but we’ll do it by using the Star HTML CSS hack to give the footer a height only in IE 6:

As strange as it may look, this does the job. Thanks to another bug in IE, the footer will not be just one pixel tall, but as tall as its content dictates.

And we’re done. We have created a simple layout that can be used as a starter for more advanced layouts.

Please don’t hesitate to contact me if you can suggest improvements to this method.

Источник

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.

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.

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.

Recent Posts

Источник

CSS multi-column layout

The CSS multi-column layout module lets you divide content across multiple columns. By using the properties in this module, you can define the preferred number and width of columns, the gap size between columns, and the visual appearance of the optional column dividing lines (known as column rules). You can also define how content should flow from column to column and how to break content between columns.

Multi-column layout in action

In this example, the 1967 speech from Canada’s centennial, A Lament for Confederation, by Chief Dan George, is displayed across multiple columns, similar to the way articles are displayed in printed newspapers. If you have JavaScript enabled, controls enable changing the preferred column number and width, the width of the gap between columns, whether the title and a sample blockquote should be contained in a single column or made to span all columns, and whether breaking within the paragraphs should be avoided.

To see the code for this columned layout, view the source on GitHub.

Note: Multiple-column layout is closely related to paged media. Each column box is a fragment, much like each printed page is a fragment of a document. Using the properties defined in the CSS fragmentation module, you can control how content breaks between columns and pages.

Reference

Properties

• break-after
• break-before
• break-inside
• column-fill
• column-gap
• column-span
• column-rule shorthand
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-count
  • column-width

  Note: Bear in mind that setting container height and line length can pose challenges for people with visual or cognitive disabilities. WCAG Success Criterion 1.4.8 states that even when the text size is doubled, content should not need to be scrolled.

  Guides

  An overview of the Multiple-column Layout specification

  How to use column rules and manage the spacing between columns.

  How to make elements span across all columns and control the way columns are filled.

  What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.

  Introduction to the Fragmentation specification and how to control where column content breaks.

  Related concepts

  • orphans CSS property
  • widows CSS property
  • overflow CSS property
  • gap CSS property
  • height , max-height , and block-size CSS properties
  • width , max-width , and inline-size CSS properties
  • enumerated data type
  • Block formatting context guide

  Specifications

  See also

  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.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник