2

I have a webpage which has fixed width layout. It used tables before and I re-created it using divs. In general I am happy with it (footer sticks to the bottom nicely now).

But there is a problem - I cannot control the contents and sometimes it can contain very wide elements. In current (divs) layout, if element doesn't fit to screen you have to scroll right (you can't avoid that) and there page frame ends, you would see blank space (i.e. no header, footer).

The cause of it is that div only expands to visible window.

I see only two options of how to solve it:

  • go back to tables layout. It was working correctly for this case - was expanding beyond the window frame if content is wider.
  • implement JavaScript solution which will check the width and expand it if needed. But I think it's just wrong.

Is there any better way to solve it? I'd like to achieve similar behavior as with tables, but using divs.

And please let me know if you need any more info, thanks.

EDIT: I need it working on IE6 (or at least IE7 if IE6 doesn't look ugly) and above + all modern browsers.

EDIT2: Here is an example where you can see what I am talking about: http://jsfiddle.net/wxrJU/6/. If you scroll right you can see that there's blank space - divs frame doesn't expand. If someone could provide solution implemented in jsfiddle as well, I would appreciate it :).

Karolis
  • 43
  • 1
  • 7
  • 1
    A place where we can have a look at the problem would be really useful :) –  Mar 09 '12 at 10:33
  • Without actually seeing your layout, I couldn't say for sure, but "div only expands to visible window" can be handled by making the div float. That way, it'll be as wide as its contents, even if the content's width exceeds the window. – Mr Lister Mar 09 '12 at 11:17
  • I've added an example page in jsfiddle, please see updated post. – Karolis Mar 09 '12 at 11:32

2 Answers2

0

A no-brainer (sp?) would be to use CSS2 display: table; along with table-celland maybe table-row values (IE8+).

If your header and footer aren't visually wide enough when the content is very wide, here are some options:

  • see the technique called faux-columns and apply it to create faux-rows (sorry for the neo-neologism :) ).
    As your content can be of any height (contrary to fixed width with faux-column), you'll have to apply multi-backgrounds: one positioned as left top for header, another positioned as left bottom for footer.
  • CSS3 background-size will resize to the desired width a background-image. IE9+ according to the great site http://caniuse.com that is more than two thirds of the browsers out there (except if your users use a lot old IEs like in an administration or a huge company). See SO polyfill background-size for IE8-

EDIT: forgot about CSS3 layout options.

Instead of display: table;, you can also consider CSS3 options:

Community
  • 1
  • 1
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • I don't think that _faux-rows_ are applicable as I do not wish to use background images for everything. Other solutions doesn't meet my browser support requirement (sorry for not noting this from the start). – Karolis Mar 09 '12 at 13:49
0

I haven't tested this in IE6 or 7, but it might be moving in the right direction...

http://jsfiddle.net/wxrJU/10/

Greg
  • 31,180
  • 18
  • 65
  • 85