Geek Answers Handbook

HTML width 100% not working

There are some problems with my HTML, so I am posting the code.

The first tag is a div with id="header" . I gave it 100% width and gave it a background image.

Inside the header there is another div with id="header-contents" . I want it to be centered on the page, so I gave it a width and then margin:0 auto . It works fine with the maximum size browser, but when I increase or increase the width of the browser to half, the background of the div header starts to disappear at some point and does not fill 100% of the width.

Here's how it looks at first glance (and should always look): intended look

Here's what it looks like when I increase or resize the browser: after resize

What is the correct HTML and CSS for this? Here is the code:

 <!DOCTYPE HTML> <html> <style> body { margin:0; padding:0; } .clear { display:block; clear:both; } #header { min-height:156px; width:100%; background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); } #head-contents { width:974px; margin:0 auto; height:156px; } #header ul { margin:85px 23px 0 0; float:right; list-style-type:none; } #header ul li { display:inline; } #header ul li a { margin-left:46px; font-size:19px; color:#fff; text-decoration:none; } #header ul li a:hover , #header ul li a.active { color:#FD7600 } </style> <body> <div id="header"> <div id="head-contents"> <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRRlklPBeTiVsV7dycvDxqFyrU02d0grYf4rTUqL-2ZzGb8Qvbwimb37HgO" /> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <div class="clear"></div> </div> </div> </body> </html>
+8
source share
5 answers

I found a solution:

 #header { height: 156px; min-width: 990px; background-image: url('http://www.webdesignideas.org/images/bellevueBg.gif'); display: block; } #head-contents { width: 974px; margin: 0 auto; height: 156px; }

This is all a matter of minimum width in #header. I checked the facebook login page and figured this out.

+7
source

FIDDLE Working Demo

You should set the width your head-contents as the min-width your header :

 #header { min-height:156px; display: block; width:100%; background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); min-width: 974px; /* this is width of head-contents */ }
+4
source

This is the stylesheet that works with me:

  body{ margin:0; padding:0; } .clear{ display:block; clear:both; } #header{ min-height:156px; display: block; width:100%; background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); } #head-contents{ width:974px; margin-left:200px; height:156px; } #header ul { margin:85px 23px 0 0; float:right; list-style-type:none; } #header ul li { display:inline; } #header ul li a { margin-left:46px; font-size:19px; color:#fff; text-decoration:none; } #header ul li a:hover , #header ul li a.active { color:#FD7600; }

Resizing the window and setting the margins to auto will freeze the position of your inner div, because the width s does not match the window.

0
source

Extract the background-image property from #header and apply this style to the body tag:

 background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;

You will no longer have the problem described by you. All you have to do is reduce the background image to a height of 156 pixels using an image editing software package like Photoshop.

Edit: here is the updated jsfiddle showing the solution: http://jsfiddle.net/eYrg8/35/

0
source 
 #header { min-height:156px; width:100%; background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif'); }
0
source

More articles:


All Articles