1

there's a container with background-color and padding specified. there's an image inside it. in a full screen browser window it looks like as it should look like: http://img263.imageshack.us/img263/4792/61536769.png

but after resizing the window (window width is less than the content width) and the horizontal scrollbar appears, if i scroll it right, i can see the background ends where the window ends: http://img845.imageshack.us/img845/7370/11506448.png

here's the code:

<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background: pink; padding: 32px; display: block;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>

in ie8 it looks right, the padding is treated as it's part of the content. in firefox and in opera it isn't, even if i use the "-moz-box-sizing: border-box;" (and correct doctype and everything...) so i don't really know what should i do. i usually did it with margin for the image but this time that can't be a solution (the actual thing is different than this example, but it shows the exact problem).

thanks for your help in advance :)

pogi
  • 13
  • 3

3 Answers3

1

Add an extra div that wraps your existing div and do float:left.

<body style="margin: 0; padding: 0; overflow-y: scroll;">

<div style="background-color: pink; width:100%;float:left;">
<div style="background: pink; padding: 32px; float:left;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</div>

</body>

Edit: Removing display: block; as that's irrelevant when you have float.

Jaspero
  • 2,912
  • 6
  • 26
  • 30
  • +1. Tried this and it worked. Actually, I got rid of the outer div and it still worked. Floating the one div is enough. Makes sense - float makes an element's size independent of it's parent. But I never would have thought to do that. – Joshua Carmody Apr 15 '11 at 19:37
  • yeah, width: 100% and float: left solves the problem :) thanks – pogi Apr 15 '11 at 19:45
0

One thing you can do in this case is to put a specific width on the div as well:

<body style="margin: 0; padding: 0;">
<div style="background: pink; padding: 32px; display: block; width: 640px;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>

You can do that in this case because you already know the width of the contents. Of course, if you need a dynamically sized div this might not work for you.

I was going to suggest putting margin: 32px on the image instead of padding: 32px on the div, but when I tried it that didn't help either. Bizzare.

Joshua Carmody
  • 13,410
  • 16
  • 64
  • 83
  • `overflow-y` is a valid CSS3 property, and scroll is a valid overflow option. Whether it does any good on `body` is another matter, though (I'm pretty sure it doesn't, since overflows at that level will usually activate the browser's scrollbars). – Shauna Apr 15 '11 at 19:26
  • @Shauna - You're right. I forgot about `scroll` as a value because I never use anything other than `auto` and `hidden`. I've removed the inaccurate info from my answer. – Joshua Carmody Apr 15 '11 at 19:33
  • I know how that goes. I generally use `auto`, `hidden`, and occasionally `visible`, myself. – Shauna Apr 15 '11 at 19:43
  • i used overflow-y: scroll to show a permanent vertical scrollbar (in case the content is shorter than the window.) – pogi Apr 15 '11 at 19:47
0

What's going on is that the div isn't expanding to wrap around the image, since the image has a fixed width, but the div doesn't (and is therefore defaulting to 100% of the parent, which is body/html at 100% of the viewport). If you look at it with Firebug, you can see that the image is going outside of the bounds of the div and its padding.

I've tweaked the CSS in this jsFiddle to get the background to expand to the image. It should at least get you started. Basically, what I did was add overflow-y: auto; to the div, which expanded the background.

Shauna
  • 9,495
  • 2
  • 37
  • 54
  • thanks for the answer, but as i see, it can't solve the problem in firefox, because this browser's still buggy :S (in the default image view there's the same problem: on top-left-bottom you can see the default 8px padding, but on the right, there's nothing...) – pogi Apr 15 '11 at 19:48