1

I am trying to get a div to expand to fill its container without causing that container to expand beyond the browser window's width, as in this page. Click "Expand" next to "Stack Trace in the last entry.

What it's supposed to do is show a horizontal scrollbar.

What it's actually doing is expanding beyond the width of the window.

I can get it to sort of work if I give the <div class="stack"> element a max-width in pixels, but I want it to expand to fill no matter how wide the window is, without expanding beyond it.

How can I fix this layout? What's a general way with css to get an element to expand horizontally to fill its container while not going beyond the window's edge?

Mar
  • 7,765
  • 9
  • 48
  • 82
  • Could not access your page. Please add your relevant code into your question itself so that we might try to reproduce your issue. – showdev Jan 14 '15 at 00:45

4 Answers4

0

The Page is back on now!

I cann't get your table stuff sorted. There are some invalid width Parameters. You should use div-Containers rather then tables to layout your page!

j_s_stack
  • 667
  • 1
  • 5
  • 18
  • I'm modifying (or, more accurately, hacking) dotProject for my company's internal use, so completely rewriting the layout isn't going to fly. – Mar Jan 14 '15 at 17:19
0

The workaround solution I came up with was adding a max-width to the expand/collapse div. It doesn't really prevent the table being wider than the window, but it solves 95% of the cases.

Mar
  • 7,765
  • 9
  • 48
  • 82
-1

Don't use tables, use DIV's and for full width use 

width: 100%;

This will always use up 100% of the browser window width.

Hans Desjarlais
  • 115
  • 12
  • "full width use" isn't the problem. The div isn't too narrow and failing to take up the window's or container's width. It's too wide; it is forcing its container to go beyond the window's edge. Could you improve or expand your answer? – Mar Jan 14 '15 at 17:22
-1

You can provide you outer Div width:100% so it will take browser width. Or else you can calculate browser width with Jquery $(document).width(); and store this in variable and provide to your outer div.

Rahul
  • 102
  • 3
  • Your div answer is not clear and simply wrapping the whole page or the bottom half in a `
    ` doesn't do the trick. Your jquery answer isn't relevant since I'm looking for a css solution.
     – Mar Jan 14 '15 at 17:19
  • See when you apply `width:100%` to `outer Div` it will expand till browser end point and after that whatever you will add it may be DIV or something else apply them display property and give width in `percentage` it will automatically wrap inside that DIV. But don't use table or `fixed width` if your window/document viewport size is less then it will go behind it. – Rahul Jan 15 '15 at 11:32