Last post Nov 16, 2012 05:20 PM by dlchase
Nov 09, 2012 02:01 PM|dlchase|LINK
I have an aspx page that I want to have 2 panels where the 1st panel displays on the left side of the page and the 2nd panel displays to the immediate right of the left panel, much like 2 TD's in a table row. How can I do that in CSS that will work in all
Nov 09, 2012 03:39 PM|asteranup|LINK
Nov 09, 2012 04:10 PM|anil.india|LINK
<asp:Panel ID="pnlLeft" runat="server" style="float: left; width: 50%; display: inline;">
<asp:Panel ID="pnlRight" runat="server" style="float: left; display: inline;">
I would suggest you to use div instead of panels.
Nov 09, 2012 04:19 PM|dlchase|LINK
That worked. I needed scrolling also so I added overflow-y:scroll to my style. The scrolling worked but my Visual Studio says that overflow-y is not a valid CSS property...but it works. If I change it to overflow:scroll then it also works but gives me
both vertical and horizontal scroll bars. I only need vertical.
Nov 09, 2012 04:20 PM|dlchase|LINK
I did use divs, thanks.
Nov 09, 2012 04:28 PM|anil.india|LINK
Also I would like to share you a thread similar to yours
Nov 15, 2012 10:29 AM|asteranup|LINK
Dont worry this is a valid css even though visual studio is not recognizing
Nov 15, 2012 09:44 PM|Motley|LINK
Dont worry this is a valid css even though visual studio is not recognizing
Hate to correct you, but overflow-y is invalid css, but it works in all major browsers except some versions of opera.
Nov 16, 2012 02:15 AM|asteranup|LINK
Hate to correct you, but overflow-y is invalid css
I dont think so. Please visit w3c standard-
Nov 16, 2012 04:19 AM|Motley|LINK
You mean the w3c working draft of css 3?
It's invalid as css 2.1, and since css 3 is still a working draft, it should still be prefixed by vendor prefixes until it is finalized. Unfortunately, most browsers have skipped that step and I don't believe they will actually accept the browser prefixes,
but let me quote the second through fourth sentence of the fourth paragraph of the working draft for you:
Publication as a Working Draft does not imply endorsement by the W3C Membership.
This is a draft document and may be updated, replaced or obsoleted by other documents at any time.
It is inappropriate to cite this document as other than work in progress.
In fact, the css box model module of css 3 is one of the parts that is furthest away from becoming a standard. What I said was correct, it is invalid css, but most browsers currently understand it, but not all. To say it is valid css would indicate that
at least that module has been ratified, which it has not. It's still has to go through at least one more major rewrite, then put up for comments, last call made on it, then to becomes a candidate recommendation, then it's voted on, then it becomes a recommendation
and presented to the W3C which may or may not accept it at that point without further changes.
Nov 16, 2012 05:31 AM|anil.india|LINK
What I said was correct, it is invalid css, but most browsers currently understand it, but not all. To say it is valid css would indicate that at least that module has been ratified, which it has not. It's still has to go through at least one more major rewrite,
then put up for comments, last call made on it, then to becomes a candidate recommendation, then it's voted on, then it becomes a recommendation and presented to the W3C which may or may not accept it at that point without further changes.
So according to you, what would be the valid solution for this thread as of now?
Nov 16, 2012 06:15 AM|Motley|LINK
Well, I would either float left a couple divs, or make them inline-block depending on the flow of the rest of the elements.
Note that in your solution, you had float: left; display: inline on your panels, which is invalid. You can't float inline elements.
As for the scrolling, I would use overflow-y: auto; but as I said, it's not valid css, but it works in most browsers, and quite simply, there isn't any other way of achieving that effect. Technically, it's not guaranteed to be achievable with the current
standards. You COULD put an inner div and force it's width so that it will never overflow horizontally the outer div, but most (all that I know of) browsers will display both scroll bars anyway. The css 2.1 spec specifies that it is up to the UA to decide
how the scrolling works/displays, and they will show both scroll bars if you use overflow: auto and only the vertical scrollbar is needed as far as I know.
That said, I believe your question was how would I do it. There is nothing wrong with doing it the way everyone has described it. Saying that overflow-y is valid css is wrong even though it works. The difference being that if the w3c decides that overflow-y
isn't correct, and change the specification to have overflow accept the values of "auto","none","scroll","x-only", and "y-only" and then all the browsers change and all of a sudden your css no longer works, it's not the browsers nor the w3c to blame. You
used something that wasn't in the specification, and the specification changed, and the browsers updated to reflect that change. Now I doubt that will happen because overflow-y has become so prevalent in code in the wild, but the fact remains that it is not
valid css by any current standard.
If you wanted to be absolutely safe about it, you should put overflow:auto; overflow-y: auto; overflow-x: hidden; that way in such an occurrance that overflow-y is ever removed, you get both scrollbars from the overflow:auto, and overflow-y and overflow-x
would be ignored. It may break your layout, but I suspect having both scrollbars would be better than having none in that case.
Nov 16, 2012 06:37 AM|Motley|LINK
Sorry, let me make one more clarification to what I said.
You could put an inner div inside the outer div. The outer div having overflow:auto. If however, you set both the inner div and outer div to the same width as most people would instinctively do, as soon as the outer div needs to create the vertical scroll
bar because your content has overflowed it vertically, the scroll bar (in most/all browsers) would reduce the usable inner width of the outer div such that now you also need to scroll horizontally and it will then create a horizontal scroll bar as well.
You CAN set the inner div width small enough that it won't overflow the outer div when the vertical scroll bar is shown, and in that case at least some browsers would only show the vertical scroll bar, but it's ugly, and it will force you to have whitespace
how much smaller the inner div width must be in order to prevent a horizontal scrollbar from appearing.
In most cases, using overflow-y is such a simple solution that it's typically worth the risk of the it causing significant issues in the future compared to the convoluted "100% correct and valid" solutions that you'd need to do to achieve the same thing.
Heh, sorry, one more clarification. When I said you can't float inline elements, that is not technically correct either. You can, but it shouldn't have the effect that most people would expect. The browser is SUPPOSED to ignore the float request on inline
elements. Whether they do or not (or which browsers do), I'm not sure, as I don't do it.
Nov 16, 2012 04:11 PM|Ruchira|LINK
I would use overflow-y: auto; but as I said, it's not valid css
This isn't essentially true. It's most definitely a valid CSS property but it's available in
CSS3. Also, Visual Studio 2012 intellisense support overflow-y style. I don't think MS would include non-valid CSS properties for intellisense.
So it's correct to say overflow-y isn't a valid property for CSS 2.1 but is a valid property for CSS3.
Since CSS3 supports by almost all the new browsers, I don't think the OP has to worry much about that.
My Tech blog | My YouTube Channel
Nov 16, 2012 05:20 PM|dlchase|LINK
Thanks everyone. So far my testing with overflow-y: scroll is working fine. Since it is an intranet the user can control updating browsers.