Example

/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */@media screen and (max-width:
600px) { .column
{ width: 100%; }}

Tip: A more modern way of creating column layouts, is to use CSS Flexbox.
However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above).

Unequal Columns

The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space
is reserved for
the main content. The side content (if any) is often used as an alternative
navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total:

Example

.column { float: left;}

/* Left and right column */
.column.side { width: 25%;}

/* Middle column */.column.middle
{ width: 50%;}

/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) { .column.side, .column.middle
{ width: 100%; }}

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using this site, you agree to have read and accepted our terms of use,
cookie and privacy policy.
Copyright 1999-2019 by Refsnes Data. All Rights Reserved.Powered by W3.CSS.