CODEWITHSUNDEEP
htmlcss
user3649195
user3649195

Reputation: 115

Header won't stretch out to full page width

I have an image as a header and in the css I set the width at "100%" but it didn't go the full way so I tried "190%" and it only extending to the right hand side of the page. I then proceeded to change the height to % as it was in px and I wanted it in % to make it look neat as the width is % but then he image disappeared.

plus I can't even change position of the image.

Here is my problem: http(semi-colon)//prntscr.com/3ufy00

Here is my code:

CSS

body { }

#image {
width:100%;
height:178px;
}

HTML

<div class="wrapper">

  <header id="menu">
<img id="image" src="http(semi)//oi62.tinypic.com/6t3fp2.jpg">
  </header>

</div>

Upvotes: 0

Views: 2720

Answers (4)

Paulie_D
Paulie_D

Reputation: 114991

If your wrapper has a restricted with then any full width elements will need to be outside of it

HTML

<header id="menu">
    <img id="image" src="http://oi62.tinypic.com/6t3fp2.jpg" />
</header>
<div class="wrapper"></div>

CSS

* {
    margin: 0;
    padding: 0;
}
#image {
    display: block;
}
.wrapper {
    max-width:80%;
    margin:0 auto;
    /* centered */
    height: 150px;
    /* just for show */
    background-color: gold;
}

JSfiddle Demo

Upvotes: 0

ShivShankar Namdev
ShivShankar Namdev

Reputation: 298

<div class="wrapper">

  <header id="menu">
<img id="image" src="http(semi)//oi62.tinypic.com/6t3fp2.jpg" height="100">
  </header>

</div>

You can try like this also.

Upvotes: 0

M.chaudhry
M.chaudhry

Reputation: 651

check this 

add 

html,body {
    margin:0;
    padding:0;
    }

http://jsfiddle.net/5r6ht/

Upvotes: 1

goregrind
goregrind

Reputation: 49

Do you have a reset.css ? body {margin:0; padding:0} try to put the img height to auto, too.

Upvotes: 0

Related Questions