Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Negative margins on nested elements

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #44125
    gummisig
    Member

    Hey there, could one of you, or a lot of you help a brother out with some padding issues?

    I have a container element with padding allround of say 100px, the element might be 1000px wide. I want one of the child elements to expand beyond the 200px padding, that is take up the whole 1200px of the parent container.

    We tried using negative margins on the child element, but that only forces it to the left, the right side does not “escape” the padding of the parent.

    We could skip the padding of the container parent and use margins or padding on all child elements, but that will be a mess, plus we are using a cms that adds `

    ` tags to everything.

    You guys and gals have any ideas on how to make this happen?

    Here’s a picture to illustrate: [Your text to link here…](http://grab.by/lDKq “Link to image”)

    #131801
    Senff
    Participant

    Is absolute positioning an option?

    #131802
    wolfcry911
    Participant

    give the child a width of 1200px

    #131804
    gummisig
    Member

    Absolute is not an option as the site is responsive.


    @wolf
    the site is responsive and we are using % for sizes.

    #131798
    wolfcry911
    Participant

    without seeing the site it’s tough to give a recommendation, but I wouldn’t rule out absolute positioning just yet. With absolute positioning, you could eliminate the width and use left: 0; right: 0; but I’m again I’m not sure how the site is built and whether height would become an issue…

    Or, how about giving the width of the child in a percentage – something like 120%? What’s happening is that the child is taking up the available width (the width of the parent). You can pull it over to the left or right easily enough with negative margins, but you also need to increase it’s default width.

    #131806
    Paulie_D
    Member

    What will be in the ‘extra-wide element?

    You could always use two containers (one above the wide element and one below) like this. http://codepen.io/anon/pen/wFitJ

    There are a couple of ways to do it.

    #131830
    Senff
    Participant

    > Absolute is not an option as the site is responsive.

    ?

    Sorry, I don’t see the relation between the two. Absolute positioning and responsive design can work very well together.

    #131860
    TheDoc
    Member

    You just need to use a negative margin on both sides: http://codepen.io/ggilmore/pen/230ceccbce1a41cc5b52b489878ea47c

    #238820
    Max Fenton
    Participant

    Oh, hey. The codepen above helped a bunch! I was running into a very similar problem and it turns out I was trying to expand the width (with negative margins) of a <figure> and forgot that a reset.css had added a max-width: 100% to that element. Whoops! max-width: none solved it.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.