CODEWITHSUNDEEP
css
user2743926
user2743926

Reputation: 5

Box model issue

I was just play around with an layout and I'm having a problem.

My header element is pushed right to the top of the container

http://codepen.io/anon/pen/CslkH

I'm missing something but I cant think what!

I have even set a margin-top and it's still push to the top of the container?

Please help guy's

Upvotes: 0

Views: 44

Answers (2)

Joseph Silber
Joseph Silber

Reputation: 219936

Your .header has a margin-top: 25px which, due to margin collapse, causes the .container to also move down.

Instead of that top-margin, use a padding-top on the .container.

Here's your updated pen: http://codepen.io/anon/pen/pbvFI

Upvotes: 1

j08691
j08691

Reputation: 207901

Add overflow:auto to your #container div:

#container {
    background-color: #93C;
    width: 1000px;
    height: 1000px;
    overflow:auto;
}

jsFiddle example

Your floats are causing this and setting the overflow restores the block formatting context.

Upvotes: 0

Related Questions