Margin-top not working on div

Question

I'm so confused by why margin-top will not work. Here is my code:

HTML:

<div class="container-extended-blog">
    <div class="offers-for-week">
        <h1 class="title offers-for-this-week">offers for this week</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        <img src="img/extended_blog_pic.jpg" alt="image of recipe">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div><!-- /.offers-for-week -->
</div><!-- /.container-extended-blog -->

SCSS:

.container-extended-blog {
    margin-top: 200px;
    margin-left: 300px;
    background-color: $blue-ot;
    width: 350px; 
    height: 450px;
    overflow: hidden;
    p {
        font-family: $content-font;
        color: $icon-font-color;
    }
}

I have tried adding position: relative; which I find usually works whenever something like this happens, however I have no idea why this isn't working, and would really like to understand!

I can't see a `margin-top` used... also, you shouldn't nest CSS. Instead of `p` use `.container-extended-blog p` — freefaller, Jun 06 '14 at 09:52
Oh I tried top: as well, and didn't change it back, neither work still... — user3541921, Jun 06 '14 at 09:54
@zkanoca, I do not believe it is a good idea to change the code provided by the OP. **YOU** have absolutely no idea if that is a typo when creating the question, or whether that is part of the problem. Changing it puts everybody else on a [wild goose chase](http://en.wikipedia.org/wiki/Wild-goose_chase). I have rolled back the question to the original — freefaller, Jun 06 '14 at 09:55
@freefaller OK. Let's ask for the OP to change if it is a typo. — zkanoca, Jun 06 '14 at 09:57
Sorry, I am very new to coding, I am an apprentice and have only been coding for 3 months... I just created a jsfiddle and it works! — user3541921, Jun 06 '14 at 09:58

score 4 · Accepted Answer · answered Jun 06 '14 at 09:56

4

add position:absolute; to .container-extended-blog

.container-extended-blog {
top: 200px;
margin-left: 300px;
background-color: $blue-ot;
width: 350px; 
height: 450px;
overflow: hidden;
position:absolute;
}

OR

Change top: 200px; to margin-top: 200px;

.container-extended-blog {
margin-top: 200px;
margin-left: 300px;
background-color: $blue-ot;
width: 350px; 
height: 450px;
overflow: hidden;
}

see fiddle at : http://jsfiddle.net/Q5xdf/

answered Jun 06 '14 at 09:56

zkanoca

9,664
9
50
94

Adding position: absolute; worked! Thank you very much for your help! – user3541921 Jun 06 '14 at 10:00
@user3541921 then mark as answer to help for others who will encounter similar problem in the future. – zkanoca Jun 06 '14 at 10:02
I was waiting for Stackoverflow to let me, it said wait 5 mins first! Thank you! – user3541921 Jun 06 '14 at 10:07

Margin-top not working on div

1 Answers1