Make your website two column responsive layout using CSS
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 WebsiteThe 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, DuniarTips.com 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.