Jay Taylor's notesback to listing index
How to make a stable two column layout in HTML/CSS[web search]
I want a container with two columns. Details:
The columns in general
The left column specifically
The right column specifically
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.
Here you go:
See it in action here: http://jsfiddle.net/FVLMX/
This makes me happy.
Try this: Live Demo
Piece of cake.
Use 960Grids Go to the automatic layout builder and make a two column, fluid design. Build a left column to the width of grids that works....this is the only challenge using grids and it's very easy once you read a tutorial. In a nutshell, each column in a grid is a certain width, and you set the amount of columns you want to use. To get a column that's exactly a certain width, you have to adjust your math so that your column width is exact. Not too tough.
No chance of wrapping because others have already fought that battle for you. Compatibility back as far as you likely will ever need to go. Quick and easy....Now, download, customize and deploy.
Voila. Grids FTW.
Not the answer you're looking for? Browse other questions tagged html css resizable two-column-layout or ask your own question.
5 years ago
Hot Network Questions
- Deleting billions of files from a directory while seeing the progress as well
- How to serve your dragon?
- Verbs for sandpaper
- Why are terminal consoles still used?
- Constructor inheritance and direct member initialisation
- Are special terminals required for connecting thermocouple wires to a PCB?
- Why is @staticmethod not preserved across classes, when @classmethod is?
- The Universe and Spaceships
- Truth Stone: Effects on the justice system, and criminal world
- Alphabetize Integers
- How to tell if intelligent life has evolved in a Game of Life simulation?
- How do we teach music theory well?
- Microwaving a glass of water, what happens?
- How do you lock up your bike trailer?
- Neutral to moderately offensive word for unimportant and uninteresting town
- Should a student be penalized for using a theorem out of the curriculum?
- Giving malicious crawlers and scripts a hard time
- Shortest program that continuously allocates memory
- Is space piracy orbitally practical?
- Which Linux or BSD distributions do still support i386, i486 or i586 CPUs?
- Alternative options for InfoPath on SharePoint Online
- The Detect Thoughts spell is trivializing social encounters. How to deal with it?
- align nodes horizontally in forest
- Schedule Items to display in Rendering Datasource
|Technology||Life / Arts||Culture / Recreation||Science||Other|