How to Make Two-column Layouts Using Floats


Here we’ll learn about css two column layout. Layouts form a necessary part when trying to achieve an objective in HTML. Layouts make the basis of your front-end architecture. They denote what elements will be placed on what ends of the browser, and define maximal usage of your screen according to user’s perspective.

two column layout, usually involves two columns, with different content on it. These columns are placed parallel to each other on a defined width and can contain different widths and heights depending upon their parent container.

Step # 1 – Attaching HTML elements to support two column layouts

Let’s get started with creating HTML divs. Assign these divs an id so they may be identified when getting attached to CSS styles

Attaching HTML elements to support two-column layout

Step # 2 – Attaching the float:left to the first column

In the next step, attach css properties to the first column, which is div with id ‘content1’. Attach the background color, width, height, and float:left so you can easily see the layout column.

first column css style

Step # 3 – Attaching float:right to the second column

Copy paste the attributes for the div id ‘content2’, and change the color and float. Assign right to float. This will be your right column. Changing width and height is optional.

second column css styles

Step # 4 – Demonstrating the two-column layout

Once saved the file, double click on the file to open with browser to see the effect of css two column layout. You can see one column appearing on the left of your parent container and the other on the right of your parent container, giving you the two column layout.

demonstrating the two column layout