Grow your CSS skills. Land your dream job.

Adding Margin to an iframe Widget

  • # May 26, 2013 at 10:48 am

    I am trying to add 40 pixels of margin on all sides of an iframe. Here is my page. Currently, my iframes have a bit of code to pull it all the way over to the edge on my front page. I want to add the little Kickstarter widget on my Feel Good Candy page, which is also an iframe, but the way the widget is designed by Kickstarter, no matter what I try, I can’t add margin or padding. Any suggestions? Thank you in advance!

    Here is the code for the iframe:

    Edit: Hopefully, I am not missing something glaringly simple.

    # May 26, 2013 at 11:21 am

    You want to add margin to the content inside the iframe? which would be the kick-starter widget?

    # May 26, 2013 at 11:21 am

    add the margin to the iframe container – .floatLeft (a terrible name btw)

    # May 26, 2013 at 11:45 am

    @Jarolin: No, I want to add margin outside of the widget so that it is 40 pixels to the right and the text is 40 pixels away from the widget.

    @wolfcry911: There is margin on .floatLeft. Here is the code:

    .floatLeft {
    float: left;
    margin: 0 40px 0 40px;
    }

    But it is being overridden by Kickstarter’s code for the widget, here:

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    }

    Any suggestions? I can’t modify the widget code because it is being called from Kickstarter’s website.

    Also, I just renamed .floatLeft to .widget and it screwed everything up. I do agree the name is horrible though. I didn’t think it mattered what you called a div as long as it’s not a duplicate of another. But I reverted back to .floatLeft.

    # May 26, 2013 at 12:36 pm

    Two things:

    1) I don’t see that margin under .floatLeft in your css

    2) Kickstarters code can’t override that margin without using greater specificity, which it hasn’t

    # May 26, 2013 at 12:57 pm

    I figured it out. Sigh. It was my fault. I’d declared .floatLeft on line 101 and then I apparently re-declared it on line 950. Everything is working as it should. I am going to go in to my little corner and wear a “dunce” hat for about an hour.

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

You must be logged in to reply to this topic.

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