CSS width:100%-Xpx

[misterx100]

Hi,

I have a div, which contains another div, which contains a image, like so:

<div class="div1">
      <div class="div2">
      </div>
</div>

.div1-le has the following CSS:

height:100%;
width:100%;
margin:0;
padding:0;
position:fixed;

This means that .div1 is the same size as the browser. Now, what I need, is .div2 to be X number of pixles from each side of the browser.

Thanks!

[shaya4207]

Give .div1 a padding-left & padding-right the amount of px you want

[misterx100]

Oh, dumb me! I never had a idea to change something in .div1 properties. I'll try it and report back in 15 minutes. Thanks!!

[shaya4207]

no problem, hope it works

[misterx100]

It doesn't :( I forgot to tell, that there is also a really big image (bigger than my screen) inside .div2. Sorry.

[shaya4207]

So how do you expect div2 to be smaller than the screen?

[misterx100]

I must shrink the image smaller.

[shaya4207]

Yep, and that's not going to happen by making the div containing it smaller

[misterx100]

But how can I make the image width or height 100% of window size - X amount of pixels?

[shaya4207]

Probably with JavaScript you can do something like calculate the amount pixels on the screen, and minus the sides, I believe that wouldn't be very easy...

[misterx100]

I think it would be quite easy with jQuery, but I'm looking for a CSS-only solution.

[shaya4207]

Not as far as I know

[misterx100]

Jquery has built-in height() and width() properties, I've seen it in action. It's not that hard. But I still need a CSS-only solution.

[shaya4207]

Oke doke, Good luck finding that...

[bkimbriel]

If I'm understanding this correct you simply want the .div2 to be a certain amount of pixels away from side?

.div1 {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
}

.div2 {
position: relative;
top: Xpx;
left: Xpx;
right: Xpx;
width: Xpx;
height: Xpx;
}

or if you just want it centered take off the left and right and just do margin: 0 auto;

That'll basically do it as long as .div2 has a width / height less than 100%.

EDIT:

Wait, so you have an image placed in .div2 that you want to be shrunk depending on the users screen resolution? There is no CSS solution to do that for ya.

[bikercyber]

Wow, great .thank you.
Do you have editor recommend for edit CSS.? please tell me .What`best for edit CSS?