Web Hosting Talk







View Full Version : Problem With CSS Layouts


CAB 08
09-03-2008, 12:21 PM
Hey everyone,

Got a problem here I'm getting to grips making layouts with CSS however I don't know how to code the side so that the content section can be expanded if there is a need. I'm not a fan of fixed content. Any ideas? My code is:

@charset "utf-8";
/* CSS Document */

body,td,th {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background-color: #FFFFFF;
font-size: 10px;
}
#nav_buttons {
border: none;
}
#header {
position:absolute;
left:0px;
top:0px;
width:900px;
height:100px;
}
#navigation {
position:absolute;
left:0px;
width:900px;
height:35px;
top: 100px;
}
#content {
position:absolute;
left:0px;
top:135px;
width:900px;
min-height: 100%;
}
#footer {
position:relative;
left:0px;
top:auto;
margin-top:auto;
width:900px;
height:55px;
}

CAB 08
09-03-2008, 04:16 PM
Thank goodness, I figured out what I was doing wrong. Looks like absolute values are fixed and wouldn't shift -.-. So I went for floats. Here's my code if anyone needs or wants it:

@charset "utf-8";
/* CSS Document */

body,td,th {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background-color: #FFFFFF;
margin:0;
}
p {
font-size:10px;
text-align:center;
}
#wrapper {
margin:auto;
width:900px;
height:100%;
border-left-style:solid;
border-left-width:1px;
border-right-style:solid;
border-right-width:1px;
border-bottom-style: solid;
border-bottom-width:1px;
text-align:left;
}
#nav_buttons {
border: none;
}
#header {
float:left;
width:900px;
height:100px;
}
#navigation {
float:left;
width:900px;
height:35px;
}
#content {
float:left;
width:900px;
}
#footer {
clear:both;
width:900px;
height:55px;
}


After a night of head pains I've DONE IT!