Make your website two column responsive layout using CSS


Hello dear Viewers , How are you?

Today I’m Prince Al-amin going to share Two Column responsive layout using CSS .Its not so difficult matter. Just you have to customize your style.css template file.

The columns in general

  • Variable height, adjusting to the height of your content.
  • Side-by-side, such that your top edges are in line.
  • Not break the layout or wrap under each other if even a single pixel of border, padding, or margin is applied to either one, because that would be extremely unstable and unfortunate.

The left column specifically

  • Fixed absolute width in pixel units.

The right column specifically

  • Width automatically fill the remaining space in the container. In other words…
  • Width automatically equal the container width minus the width of the left column, such that if I place a DIV block element inside this column, set its width to 100%, give it a height of something like 10px, and give it a background color, I will see a 10px high colored strip that goes from the right edge of the left column to the right edge of the container (i.e. it fills the right column’s width).

The CSS Code for a 2 Column Website

The CSS below uses percent (“%”) for the widths of both columns. Since they are measured in relative units, they will expand or contract to fill the entire browser window no matter how large it may be. At the time I write this, uses such a fluid layout for its right column as well. For example, if you change the size of your browser window, the software will reformat the article column as far as possible to fit within the window (unless you resize it too small).

The CSS code for this is simple.

Put your left content here


How It Works: Explanation of the CSS Code

The “float: left” and “float: right” rule causes the DIV block to be taken out of the document flow (the default way in which the elements on your page are arranged), and placed on the right with all other text and images flowing around it on the left. The first DIV block to be encountered on the HTML page is floated first.


With the CSS code given above, you’re now on your way to creating your 2-column website.