Grow your CSS skills. Land your dream job.

Alternative to margin-top?

  • # June 25, 2013 at 10:07 am

    Hello,

    I am working on a website and am relatively new to CSS, I am wondering if there is an alternative to margin-top when positioning divs.

    Right now I have everything where I want it to be, but if I move a div at the top, the divs below it also jump down or up, since I used margin-top.

    Any thoughts?

    # June 25, 2013 at 10:09 am

    We’d need to see the site.

    Are you adding the margin to a class or an ID?

    If you have “everything where I want it to be”, why are you moving divs?

    # June 25, 2013 at 10:15 am

    > Are you adding the margin to a class or an ID?

    Classes and ID’s.

    >If you have “everything where I want it to be”, why are you moving divs?

    Because if I did want to change something, it would be a bit more of a hassle to have to change the margin for the div I wanted to move, then the ones below it to put them back in place, maybe that’s the only way. I don’t know, I am just trying to learn.

    MOD EDIT: Code Clip

    # June 25, 2013 at 10:16 am

    That’s WAAAAY too much code.

    Please put a **reduced** case in Codepen.io

    Or provide a link to a live site.

    # June 25, 2013 at 10:28 am

    http://cdpn.io/cztyA

    The site does not show up 100% right (images don’t load) but all the divs are in the correct places.

    # June 25, 2013 at 10:32 am

    I can tell you now…this…

    is a bad idea.

    # June 25, 2013 at 10:36 am

    Your menu structure is also wrong

    This

    `

    • Plastic Letters & Logos
    • Injection Molded
    • `

      Now, where are the margins that need changing?

    # June 25, 2013 at 10:51 am

    If you go down to line “237″ in the CSS for example, and change the value for margin-top, you will see the .box class move, but also all the content below it.

    # June 25, 2013 at 10:59 am

    Whoa…those are some huge margins.

    It makes me think your HTML structure is marginal. You really shouldn’t need to do that.

    I think you need to look at alternative layout methods, specifically “floats”.

    http://learnlayout.com/

    # June 25, 2013 at 11:36 am

    That’s what I thought, I’ll take a look at that site, thanks a lot for your time and help!

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

You must be logged in to reply to this topic.

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