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%?

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.


More discussions in Dreamweaver support forum


adobe

Comments

Popular posts from this blog

Convierte tu Raspberry en un NAS. Firmware fvdw-sl 15.3 - Raspberry Pi Forums

How to format a Get Request

avrdude: verification error, first mismatch at byte 0x0000 0x0c != 0x62