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
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.
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.
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.
Home