I swear I've done this before, but maybe it was in the pre-standards bad old days. Now I can't even figure out the keywords to find possible workarounds.
So I have a table that is in a wrapper so that the x-overflow is inside the wrapper instead of expanding the window. Let's say each column is hard-set with css to be 150px. I want it so that when horizontally scrolling the wrapper, the scrollbar "jumps" 150 pixels so that the right edge of the next column is aligned with the left margin of the wrapper. In other words, you scroll by column, not by pixel, so that the left-side of the viewport is never a partial column.
By extension, it would be ideal if this could be variable-width jumping so that the columns aren't forced to be a unified width, and I'd like to have this and all of the above for vertical scrolling as well.
I thought this was a standard but overlooked option for css or at least a deprecated html style attribute, but like I said, now I can't even find the idea/concept when I Google they keywords that come to mind.
Any help (even somewhat hackish ones that get me started) is appreciated.
This ain't exactly CSS, but you can use the DOM attribute scrollLeft (and also scrollTop if you need that direction).
For more information and a bit of an example, you can refer to this page.
Related
When trying to make websites responsive I quite often get horizontal scrollbar on small widths. But often it is quite not obvious which element introduces it and it might take quite some time to pin down. It is even worse when it is interaction of multiple elements... So maybe someone can give some advice, of how to reliably find which elements flow incorrectly?
You get a horizontal scroll bar when some element has width greater than its parent.
If problem is occurring in responsive design, elements which has width in px or em are probably the ones causing issue. Give them width in % and that might solve your issue.
I want to create a table with 3 columns: On the left and right fixed-width columns (which are obscured by position:fixed - divs) and in the middle a variable width column.
This does NOT work:
<table>
<tr>
<td width=202px></td>
<td> [MYCONTENT] </td>
<td width=200px></td>
</tr>
</table>
The problem is, that for some reason the browsers (tested on Chrome and Firefox) think that I don't really mean it when the browser-window is not wide enough: The outer columns are cropped and width-setting ignored, therefore the real content is sliding under my divs and become completely inaccessible.
The only idea I have left is to use a 1990's-era transparent pixel resized to 200px width, but I shudder at the thought. There must surely be a better way?
(BTW, yes I have tried various pure-css layouts, and none was suitable, for example if you use overflow:auto for the middle column, the scrollbar at the bottom also scrolls(!!) that means if the page is both higher and wider than the window, you have to first scroll down to see the scrollbar, then scroll horizontally, then maybe scroll up again to see what you wanted to see in the first place. I also tried to use padding: to force the needed margins on the left and right, but this also was ignored when the browser-window was not wide enough.)
ok - here it is with tables.
http://jsfiddle.net/sheriffderek/wAGKp/2/
i guess the short answer would be - take the styles out of the html and use a selector. (class in this case" and then min-width --- and width... also - keep in mind that padding and margins will change the width of your stuff... so you could use the border-box method... (it's rad) and included in the second... makes it so that padding stays in the original div size --- hope this helps.
and here it is the way i would do it. (without tables...)
http://jsfiddle.net/sheriffderek/GBtdy/1/
Tables are for tabular data, if you want to layout content you should be using CSS.
I recommend using something like Twitter Boostrap if you struggling with the CSS.
If you really just want a specific solution have a look at the results for terms like "css 3 column layout fluid center - I am not fobbing you off with that, there really are great answers there that are exactly what you want, and lots of search results will take you to those pages (especially to the manisheriar.com and A List Apart articles).
You can use min-width (on the middle div) and max-width - as well as media queries - to help control what happens in smaller windows.
I am currently working on a prototype that is using CSS3 multi columns for dividing up content and it appears to work well. My issue is that inside of a block that is part of the columns there is an expanding height section and well, in Firefox when the height of an element inside of a CSS3 multi-column changes it disappears and then Firefox crashes.
Shouldn't CSS3 multi-columns take into account varied height content inside or is it not made for that sort of thing? I'd really hate to have to use a plugin like Columnizer, because Columnizer is a pain in the butt to get working correctly.
Here is the layout:
[DIV]
[CONTENT] - Default height is 38 pixels
[EXPAND LINK] - A link when clicked that modifies the height of content to be 52 pixels.
[/DIV]
The issue is as soon as the link is clicked and the height changes, it's like it loses its layout and positioning (the height and width change to 0), then Firefox crashes. This is also the case if I use Firebug to change the height manually.
I resolved the issue right are posting this question basically and my solution was as follows in-case someone else runs into this issue which I believe some will.
I had a parent div element with the appropriate CSS3 multi-column code. The inner elements are article elements (you could just use div's though). The issue was that the inner article elements were being floated left (just out of pure habit of having to float things to give the appearance of columnised items). The floated elements were clashing with the CSS3 multi-column code thus crashing the browser.
I'm guessing that because a float modifies the layout of an element, the multi-column code was trying to perhaps readjust the box and then getting into an endless loop. I'm not entirely sure what went on, but floating elements inside of a multi-column div or anything is bad.
Alright, so this is basically the usual "how to vertically center with CSS" question, but with some catches.
No Javascript. HTML and CSS only. CSS3 is fine as long as it's reasonably well supported by today's browsers.
The element's content, and therefore height, is not known. It may be anywhere from a few dozen to a few hundred pixels. In the future I might even have a script adding and removing elements inside, so it may change height as the user is interacting with it.
There is other content on the page - a navigation bar at the left and a menu at the top. These need to be accessible.
The approach I've used is the three-container-div method using display: table-cell, as documented at: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html this solves issues 1 and 2, but not 3.
http://imgh.us/vcenter.jpg shows the design and the problem. The yellow box is the innermost container. The red and green dotted boxes around the entire page (which have become somewhat blurred together due to JPEG encoding) are the outermost and middle containers respectively. (The out-of-place footer is a separate issue...)
The problem with this layout is the outer containers cover the entire page, and this makes it impossible to click on the navbar, because it's now "under" those containers. Z-index can move them to the bottom, but then it becomes impossible to click on anything inside the red box, because it's now "under" the page's main content box. (XHTML only allows a single element inside the <body>, so I've just wrapped it all in a <div>.) Even if the outer two containers have z-index: -100 and the inner container has z-index: 200, it still ends up under the main content box for some reason. (I did try various position attributes.)
The only solution I've seen is a new CSS3 property, pointer-events, that would in theory allow me to make events pass through the transparent containers as I'd expect; however this seems to be quite new and not yet supported by most browsers outside of SVG, and I imagine I'd have the same trouble as with Z-index.
I do want the element at the center of the page, not the center of the content area (i.e. ignoring navbars in the calculation of position), so placing the container inside the content area isn't an ideal solution. (I'm using this style on the login page as well, which has no navbars, and it'd look a bit strange if the "centered" elements were centered relative to a navbar that isn't always visible.)
In summary what I need is to center, without using Javascript, an element of unknown height on a page with other content at its edges, without covering any of the content with an invisible layer (and thus making it unclickable).
While this is obviously an old question and the OP has undoubtedly solved this problem, I figured I'd add a link to Chris Coyier's marvelous write-up on how to deal with this issue for future wayfarers in need of a similar solution.
http://css-tricks.com/centering-in-the-unknown/
Hey guys, I've struggled with this for a bit and don't seem to find a solution. Need an advise or the simple statement saying this is impossible (so far I think it is - impossible).
Problem is:
need 3 column flixible width layout, left fixed width, right aswell, middle - takes all of the space provided by body or whatever.
Trick is that either right or left columns might be taller then middle, and we need them not to overlap the footer. Also docmode is Strict. I know that Table solves the problem in a sec, but I wonder is there a Div solution around?
This is what you're looking for I think:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
or with pixel widths:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
It's XHTML strict, and supports all current browsers.
YUI Grid CSS is proabably what you want. I am not familiar with the CSS magic involved, but it supports multiple different layouts. It doesn't seem to support fixed left and right columns.
No tables challenges are a bit like waving a red flag to a bull for me:
http://edeverett.co.uk/experiments/noTables2.html
Tested in IE7, FF3, Chrome 2.
This should get you most of the way there, the main idea is to use negative margins on the two side columns with the main column set to 100% width. It would benefit from having a lower limit on the page width.
(I've edited the example html to show how to include content in the centre section)