I'm trying to get my webpage to expand horizontally to fit any browser window but still have the content centered in the middle of the page. I managed to do one or the other but cannot for the life of me figure out how to make both work at the same time. If I set width and height to 100% and have the body margins set to 0 auto it works great but then my content is no longer centered and all the divs end up overlapping each other. However, if I set the width to 900px then it's all centered and looks great. But there's white space around it because it's not expanding to fit the browser window.
Can anyone let me know the trick to making this work? I want it to look like this page where the sides expand to fit the browser but all the content remains centered in the middle:
Also, here is my CSS:
<style type="text/css">
body {
text-align:center;
margin:0px;
padding:0px;
width:100%;
height:100%;
}
body#home a#nav-home,
body#resume a#nav-resume,
body#portfolio a#nav-portfolio,
body#contact a#nav-contact
{
color: #dfadec;
text-decoration:none;
}
#container {
background-color:#eae5e5;
width:900px;
text-align:left;
margin: 0 auto;
height:auto;
}
#main {
padding-top:200px !important;
padding-bottom:120px !important;
width:900px;
margin-left: auto;
margin-right:auto;
}
#header {
position:fixed;
border-top:solid 15px #4d4d4f;
font-family:Open Sans;
font-size:30px;
color:#4d4d4f;
background-color:#FFF;
width:900px;
padding-bottom:45px;
}
#title {
padding-top:30px;
position:absolute;
margin-left:60px;
}
#footer {
color:#FFF;
position:fixed;
font-family:Open Sans;
font-size:12px;
background-color:#dfadec;
width:900px;
padding-bottom:45px;
padding-top:45px;
margin: 0 auto;
height: auto;
}
#nav {
padding-top:70px;
font-size:12px;
color:#CCC;
margin-left:570px;
}
#nav a:link {
color:#CCC;
text-decoration:none;
}
#nav a:hover {
color:#dfadec;
text-decoration:none;
}
h1 {
font-size:60px;
font-family:Open Sans;
color:#4d4d4f;
margin-top:-150px;
}
h2 {
font-size:40px;
font-family:Open Sans;
color:#4d4d4f;
font-weight:normal;
margin-top:-40px;
}
#resume {
background:#5c5c54;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:5px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear, ease-in;
}
#resume p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}
#resume:hover {
background-color:#373732;
color:#FFF;
}
#work {
background:#dfadec;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:150px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear, ease-in;
}
#work p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}
#work:hover {
background-color:#705676;
color:#FFF;
}
#skills {
background:#4d4d4f;
width:130px;
height:130px;
font-family:Open Sans;
color:#FFF;
margin-left:295px;
text-align:center;
position:absolute;
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear, ease-in;
}
#skills p {
vertical-align:middle;
padding-top:45px;
font-size:12px;
}
#skills:hover {
background-color:#262628;
color:#FFF;
}
img#icon {
background-color:#4d4d4f;
padding:12px;
}
#intro {
width: 400px;
font-family: Open Sans;
font-size: 12px;
color: #4d4d4f;
margin-left: 320px;
position: absolute;
left: 500px;
top: 522px;
text-align:justify;
}
</style>
Any suggestions? Please let me know. And let me know if I need to post the HTML too.. I just figured the problem was in the CSS since that's where I'm defining width, etc.
Thanks!
Pooja
