Menu
I'm trying to design a page that has two columns of content, div#left and div#right. (I know these aren't proper semantic identifiers, but it makes explaining easier) The widths of both columns are fixed.
Desired result - Wide viewport
When the viewport is too narrow to display both side-by-side, I want #right to be stacked on top of #left, like this:
Desired result - narrow viewport
My first thought was simply to apply float: left to #left and float: right to #right, but that makes #right attach itself to the right side of the window (which is the proper behavior for float, after all), leaving an empty space. This also leaves a big gap between the columns when the browser window is really wide.
Wrong - div#right is not flush with the left side of the viewport
Applying float: left to both divs would result in the wrong one moving to the bottom when the window was too small.
Wrong - div#right is not on top of div#left
I could probably do this with media queries, but IE doesn't support those until version 9. The source order is unimportant, but I need something that works in IE7 minimum. Is this possible to do without resorting to Javascript?
576
Responsive Two Column LayoutResize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).
Declare both (recommended) Use column-count and column-width together for the best control over CSS columns. You can declare each property or use the shorthand columns . When both properties are declared, column-count is the maximum number of columns and column-width is the minimum width for those columns.
Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.
To position the divs side by side, we are using the float property to float each . float-child element to the left. Since they are both floating to the left, they will display side by side if there's enough space for both to fit.
Add an outer container to the 2 columns which is floated left, but without a specific width.
Check the fiddle.
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
