Menu
I want a container with two columns. Details:
The container should be able to resize (by resizing the browser window) down to its minimum width (specified earlier) or to a much larger width without breaking the layout. "Breaking" would include the left column changing size at all (remember it's supposed to have a fixed pixel width), the right column wrapping under the left one, scrollbars appearing, block elements in the right column failing to take up the entire column width, and in general any of the aforementioned specifications failing to remain true.
If floating elements are used, there should be no chance that the right column will wrap under the left one, that the container will fail to contain both columns (by clipping any part of the column or allowing any part of the columns to overflow its boundary), or that scrollbars will appear (so I'd be weary of suggesting the use of anything other than overflow:hidden to trigger floating-element containment). Applying borders to the columns should not break the layout. The content of the columns, especially of the right column, should not break the layout.
There seems to be a simple table-based solution to this, but under every circumstance it fails miserably. For example, in Safari, my fixed-width left column will shrink if the container gets too small, rather than maintaining the width I specified. It also seems to be the case that CSS width, when applied to a TD element refers to a minimum width, such that if something larger is placed inside it, it will expand. I've tried using table-layout:fixed; doesn't help. I've also seen the case where the TD element representing the right column will not expand to fill the remaining area, or it will appear to (for example a third column 1px wide will be pushed all the way to the right side), but putting a border around the right column will show that it's only as wide as its inline content, and block-level elements with their width set to 100% do not fill the width of the column, but rather match the width of the inline-content (i.e. the width of the TD seems to be completely dependent on the content).
One potential solution I have seen is too complex; I couldn't care less about IE6, as long as it works in IE8, Firefox 4, and Safari 5.
345
To merge table columns in HTML use the colspan attribute in <td> tag. With this, merge cells with each other. For example, if your table is having 4 rows and 4 columns, then with colspan attribute, you can easily merge 2 or even 3 of the table cells.
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).
A two column layout is commonly used on screen wider than smartphone screen that is tablet, desktop and wide screen. With responsive design, the two columns are reorganized into one column on smartphone screens. Using a two columns layout, you can split and structure the content into related sections.
Here you go:
<html> <head> <title>Cols</title> <style> #left { width: 200px; float: left; } #right { margin-left: 200px; /* Change this to whatever the width of your left column is*/ } .clear { clear: both; } </style> </head> <body> <div id="container"> <div id="left"> Hello </div> <div id="right"> <div style="background-color: red; height: 10px;">Hello</div> </div> <div class="clear"></div> </div> </body> </html>See it in action here: http://jsfiddle.net/FVLMX/
94
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
