Is It Possible to Do This with CSS?

[realph]

So I wanted to know if it’s possible to do this. Basically, I’ve got my #wrapper set to margin: 0 auto, but want all imgs that are already within a #content div to extend their width until the edge of the browser. Like so:

Here’s a jsFiddle I setup to try and replicate my idea: http://jsfiddle.net/W7p3K/45/

Any idea if this is possible? Thanks in advance.

[Paulie_D]

You mean like this?

http://jsfiddle.net/hL43A/

Clearly an image can’t break out of it’s container though.

[realph]

Yeah, I wanted the wrapper to stay put though.

[Paulie_D]

Then “No”. Either it’s in the wrapper or it isn’t.

You might be able to position it absolutely though…not sure how that would scale.

[Paulie_D]

Yeah,,,having the image scale sort of defeat the point of having a wrapper.

Why not just take it out of the content?

http://codepen.io/anon/pen/KaewC

[realph]

@Paulie_D That’s pretty much what I’m looking, except with a wrapper that keeps the rest of the content (sans the images) centered. Know of a way around that?

[Paulie_D]

Nope.

[realph]

@Paulie_D :(

[Schwarttzy]

I can do this give me a second.

[Schwarttzy]

Woot! I thought I might have opened my mouth to soon but I got it. Link -> [http://codepen.io/anon/pen/hIpyE](http://codepen.io/anon/pen/hIpyE “http://codepen.io/anon/pen/hIpyE”)

[realph]

@Schwarttzy Fantastic solution! But do you know a way of keeping the container a fixed width? i.e. 960px

[Schwarttzy]

Sorry not possible, the image is dependent on that width. I suggest you forget about 960px… and look into percentages because they work much better.

[Author]

Posts