CODEWITHSUNDEEP
htmlcss
OfirH
OfirH

Reputation: 657

Div moving when screen is re-sized

I'm trying to put div header at the top of my site. I need it to be 100% width of the page.

The problem is that when I resize the browser window the div is resized as well...

I tried this:

#head   {
    height: 120px;
    background: url('../images/head.jpg') repeat;
    margin: 0px auto;
    width: 100%;
}

And this:

#head   {
    height: 120px;
    background: url('../images/head.jpg') repeat;
    margin: 0px auto;
}

Both ways didn't work.

#head   {
        height: 120px;
        background: url('../images/head.jpg') repeat;
        margin: 0px auto;
        width: 1100px;
}

This worked. But I need the width to be 100% of the page, so it dosen't help me.

How can I solve it? Thank you!

Upvotes: 1

Views: 38

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157314

The first block will obviously resize as you are using width: 100%; if you are using a block level element say div you won't need to define 100% as it takes entire horizontal space by default.

Now in the second block, it won't work, as you are trying to center a block level element using margin: auto; but without any width defined.

Third works, because you have a fixed width defined along with margin: auto;.

So now how to solve this?

Nest the fixed width element inside 100% width element using margin: auto; on the child element, and your issue will be solved.

Demo

HTML

<div class="full_width">
    <div class="center_me"></div>
</div>

CSS

.full_width {
    background: #aaa;
    min-height: 100px;
}

.center_me {
    background: blue;
    min-height: 100px;
    margin: auto;
    width: 300px;
}

Upvotes: 2

Related Questions