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 g
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.
#header {
min-height:156px;
width:100%;
background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
}
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.
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/
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 */
}