SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Overflow

    I'm trying to accomplish something with CSS and I'm not sure it's possible. I have a table that is floated left and should take up about 96% of its parent div. However, the table will be significantly wider than the parent element in most cases. Let's say the parent is about 500px, and the table is about 1000px. I want the table to have a horizontal overflow scroll bar, while expanding downward as necessary.

    I know about the overflow-x and overflow-y css properties, but if I'm not mistaken, these are not widely supported (not even in the CSS spec, right?).

    Ideally I'd have a table that was always 96% wide, but overflowed to the right via a scroll bar if the 96% wasn't enough to encompass its width -- I'm even willing to give a hard width to the table if necessary. It needs to work in IE6, IE7, and FF, and I'm hoping I'll only being using CSS.

    Is this possible?
    Bring out our hope and reason, before we pine away.

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I did inline styling, let me know...
    HTML Code:
    <div style="border:#000000 solid 1px;">
    	<div style="overflow:auto; width:96&#37;; border:#000099 solid 1px;">
    		<table border="1" width="1000">
    ....
    		</table>
    	</div>
    </div>
    The scrolling is dependent of window size.
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How does that address the requirement that the table not scroll vertically? Of it's possible to set the container to overflow:scroll, but how do we differentiate between overflow-y and overflow-x?
    Bring out our hope and reason, before we pine away.

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    From your original post:
    I want the table to have a horizontal overflow scroll bar, while expanding downward as necessary.
    The child div will give you that horizontal scrollbar if overflowed. Now if you don't want a scrollbar at all, you will need to specify widths for the column. Remember it has to be all percents.
    Ryan B | My Blog | Twitter

  5. #5
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Overflow Works, sort of

    OMG! This is exactly what I was looking for and it works so amazingly well!!!

    Well, actually, only in Firefox does it work really well. In both IE 6 and 7 it pushes the table all the way across the screen and ignores the overflow request.

    Take a peak at http://booksbymaryannmacdonald.com/costume-copycat.htm

    I've figured out how to change the color of the scroll bars to enhance the design, (there's a great online tool here http://iconico.com/CSSScrollbar/) but Firefox won't acknowledge the request to change the color (in fact, this tool won't even be shown in Firefox).

    If anyone has any thoughts about how I can accomplish both the overflow and the scrollbar color change in IE, I'd greatly appreciate it.
    Last edited by Little Fish; Sep 28, 2007 at 10:55. Reason: additional information


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •