Grow your CSS skills. Land your dream job.

Is It Possible to Do This with CSS?

  • # November 20, 2012 at 11:42 am

    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.

    # November 20, 2012 at 11:48 am

    You mean like this?

    http://jsfiddle.net/hL43A/

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

    # November 20, 2012 at 11:58 am

    Yeah, I wanted the wrapper to stay put though.

    # November 20, 2012 at 12:00 pm

    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.

    # November 20, 2012 at 12:07 pm

    Is there a particular reason the image needs to be in the content or in any container?

    # November 20, 2012 at 12:31 pm

    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

    # November 20, 2012 at 2:43 pm

    @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?

    # November 20, 2012 at 2:54 pm

    Nope.

    # November 27, 2012 at 6:24 pm

    @Paulie_D :(

    # November 27, 2012 at 10:58 pm

    I can do this give me a second.

    # November 27, 2012 at 11:13 pm

    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”)

    # November 29, 2012 at 3:42 pm

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

    # December 1, 2012 at 7:41 pm

    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.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".