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!

Recommended Answers

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

Jump to Post

no problem, hope it works

Jump to Post

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

Jump to Post

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

Jump to Post

All 15 Replies

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

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!!

no problem, hope it works

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

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

I must shrink the image smaller.

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

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

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...

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

Not as far as I know

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.

Oke doke, Good luck finding that...

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.

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.