how do you create a full-width page that when you minimize the window, the content of an element (eg. header, content area, footer) won’t stack up at each other?
here’s my css:
body {
background:#fff;margin:0 0 0;
}
#pagewrap {
margin:0 auto;
}
#header {
width:100%;
height:50px;
background: #F5D0A9;
position:relative;
}
#hd-wrap {width:960px;clear:both;}
#top-nav ul {
position:absolute;
right:0px;
top:10px;
clear:both;
}
#top-nav li{
display:inline;
margin: 10px 5px;
}
#top-nav li a {
font-size:14px;
font-family: Arial, Helvetica, sans-serif;
color:#000;
padding:5px 20px 5px ;
letter-spacing:3px;
text-decoration:none;
}
#top-nav li a:hover {
background:#A9D0F5;
border-radius:3px;
}
h1 a{
text-indent:-9999px;
display:block;
background: url(logo.png) no-repeat;
width:160px;
height:47px;
position:relative;
left:6px;
top:6px;
}
#main-body{width:960px;margin: 10px 0 auto;clear:both;}
#welcome {
position:relative;
border-right:2px solid #0000;
}
#welcome p{
font-family: Arial, Helvetica, sans-serif;
font-size:30px;
top:0px;
left:0px;
}
#welcome span {
color:#FE2E2E;
text-decoration:none;
}
#ad {position:absolute;top:0px;right:0px;background:#000;
width:468px;
height:60px;}
