CODEWITHSUNDEEP
csshtmlwidth
UmeRonaldo
UmeRonaldo

Reputation: 619

Html div width 100% not functioning

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

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

Inside the header there's another div with id="header-contents". I want it centered on the page so I have given it a width and then margin:0 auto. It works fine with the max-sized browser but when I zoom in or resize the browser width to about half, the background of the header div starts to disappear at some point and does not fill in 100% width.

This is how it looks at first (and should always look): intended look

This is how it looks when I zoom or resize the browser: after resize

What is the proper HTML and CSS for it? Here's 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>

Upvotes: 8

Views: 31796

Answers (5)

Dheeru Rawat
Dheeru Rawat

Reputation: 1

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

Upvotes: 0

UmeRonaldo
UmeRonaldo

Reputation: 619

I have found the 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;
}

It's all a matter of min-width in the #header. I checked out facebook's login page and figured it out.

Upvotes: 8

user1823761
user1823761

Reputation:

Working FIDDLE Demo

You must set the width of your head-contents as the min-width of 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 */
}

Upvotes: 4

Rob
Rob

Reputation: 406

Take out 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 you described. All you need to do now is cut down the background image to 156px height, using an image-editing software package like Photoshop.

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

Upvotes: 0

Samson
Samson

Reputation: 2821

This is the style sheet which 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 screw the position of your inner div because it s width doesn t fit the window.

Upvotes: 0

Related Questions