Mixing liquid and fixed width css layout problem
i'm trying make simple page has background image @ top of page expands fix 100% of page. under have area set @ 960px width , centered on page.
the problem have is make window smaller 960px see scroll bars, scrolling left can see rest of fixed width div area 100% area @ top stops repeating , not fill page.
here simple code have done:
html {
margin:0px;
padding:0px;
}
#wrapper {
height: 100%;
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#top {
background-image: url(images/layout/topbackground.png);
background-repeat: repeat-x;
padding: 0px;
height: 97px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#mid {
background-image:url(images/layout/midbackground.png);
background-repeat:repeat-y;
padding:5px;
width: 955px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
<div id="wrapper">
<div id="top">top</div>
<div id="mid">mid</div>
</div>
anyone know how can fix this?
also there way make div's height 100%?
the problem have is make window smaller 960px see scroll bars, scrolling left can see rest of fixed width div area 100% area @ top stops repeating , not fill page.
here simple code have done:
html {
margin:0px;
padding:0px;
}
#wrapper {
height: 100%;
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#top {
background-image: url(images/layout/topbackground.png);
background-repeat: repeat-x;
padding: 0px;
height: 97px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#mid {
background-image:url(images/layout/midbackground.png);
background-repeat:repeat-y;
padding:5px;
width: 955px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
<div id="wrapper">
<div id="top">top</div>
<div id="mid">mid</div>
</div>
anyone know how can fix this?
also there way make div's height 100%?
luke,
put background image on body. default, tile fill
the entire browser window.
hth,
randy
> i'm trying make simple page has background image @ top of
> page expands fix 100% of page. under have area set
> @ 960px width , centered on page.
>
> problem have is make window smaller 960px
> see scroll bars, scrolling left can see rest of fixed width div
> area 100% area @ top stops repeating , not fill page.
put background image on body. default, tile fill
the entire browser window.
hth,
randy
> i'm trying make simple page has background image @ top of
> page expands fix 100% of page. under have area set
> @ 960px width , centered on page.
>
> problem have is make window smaller 960px
> see scroll bars, scrolling left can see rest of fixed width div
> area 100% area @ top stops repeating , not fill page.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment