Positioning and flow

When having a design that is based purely on positioning and not floating, how do you use the positioning to let your content flow. I have a footer below my content and if my content stretches farther than the position of the footer, it will overlap it... How do I make it so the content can stretch down and when it does so the footer stays the same distance away it is given, but not re-coding the entire design?

 

Don't.

Use floats or it will be a bitch trying to get it with any position other than static.

 

It is already coded throughout using positioning. Is there a way that I could make the footer itself float?

 

Not sure what you mean exactly. If you just have a content box and a footer afterwards, the footer will be automatically pushed down as the content box grows. Without floats.

If you mean that at first, there is very little content and the footer is supposed to sit at the bottom of the screen, then position:static will make it sit there. But you want it to start at the bottom and then be pushed down?

Without floats, maybe the easiest is to use the regular positioning where the content pushes down the footer by giving the content box a minimum height, which is bigger than the content and thus the bottom edge of the content box is keeping the footer down.

As the content grows larger than the min-height, then then box should grow further and still push the footer down.

Doesn't work for IE6 of course. For that, you need something like
content {
min-height:whatever px;
height:auto !important;
height:whatever px;
}
RoW will see min-height and auto. IE will see only "height" which for 6 means "min-height". Gaaar.

 

Tried that and it didn't work. Positioning just seems to cause the content to go behind the footer. I'll PM you and show you what I mean Stomme.

 

What you don't want to do is your answer. Positioned layouts on the whole usually /fail/ miserably the moment you need to change their content. A little positioning inside flow managed containers for tricks like simpleshadows or image replacement are fine - doing an entire layout on positioning, that's just asking for it to break.

Chuck it, start over... and let flow do the work for you.

 

You don't need to bin the design at all. Just remove the positioning from your CSS and replace with floats. Then add a clear to your footer.

Paste your CSS here and any one of us will clean it up for ya.

 

I didn't learn the full aspects of css and xhtml. I started off with floating and it wasn't cross-browser compliant, but using positioning worked fine so I stuck with that. Below is the code for the stylesheet from top to bottom. Thanks for the help.

body {
margin: 0px;
padding: 0px;
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 11px;
background-color: #f5f8f8;
}

#topbg {
position: absolute;
width: 100%;
height: 87px;
background-image: url("images/menubg.jpg");
background-repeat: repeat-x;
padding: 0px;
margin: 0px;
}

#containtop {
position: absolute;
width: 950px;
height: 87px;
padding: 0px;
left: 50%;
margin-left: -475px;
}

#logo {
position: absolute;
height: 25px;
top: 25px;
width: 400px;
}

#menu {
position: absolute;
height: 30px;
top: 25px;
left: 558px;
width: 392px;
}

#nav { margin: 0; padding: 0; height: 30px; list-style: none; display: inline; overflow: hidden; }
#nav li { margin: 0;  padding: 0; list-style: none; display: inline; }
#nav a { float: left; padding: 30px 0 0 20px; overflow: hidden; height: 0px !important;  height /**/:30px; /* for IE5/Win only */ }
#nav a:hover { background-position: 0 -30px; }

#home a  { width: 62px; background: url(images/home.jpg) top left no-repeat; }
#tuts a  { width: 84px; background: url(images/tutorials.jpg) top left no-repeat; }
#downloads a  { width: 96px; background: url(images/downloads.jpg) top left no-repeat; }
#contact a  { width: 70px; background: url(images/contact.jpg) top left no-repeat; }

#welcome {
position: absolute;
left: 50%;
margin-left: -475px;
background-color: #FFFFFF;
height: 30px;
width: 920px;
padding: 15px 0 0 15px;
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 12px;
color: #015151;
border: 1px solid #dfe8e8;
top: 120px;
letter-spacing: 1px;
}

#welcome a {
color: #fe6318;
text-decoration: underline;
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 12px;
font-weight: normal;
}

#welcome a:hover {
color: #015151;
text-decoration: none;
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 12px;
font-weight: normal;
}

#adcon {
position: absolute;
top: 210px;
left: 50%;
width: 728px;
height: 90px;
margin-left: -364px;
}

#adsense {
position: absolute;
width: 728px;
height: 90px;
}

#content {
position: absolute;
left: 50%;
top: 360px;
margin-left: -475px;
width: 950px;
}

#leftcon {
position: absolute;
width: 600px;
}

.post {
float: left;
width: 600px;
height: 80px;
border-top: 1px solid #dfe8e8;
padding: 0 0 0 20px;
margin: 0px;
background-color: #f8fafa;
line-height: 80px;
}

.post a {
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 18px;
color: #015151;
font-weight: normal;
text-decoration: none;
}

.post a:hover {
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 18px;
color: #015151;
font-weight: normal;
text-decoration: underline;
}

.button {
float: right;
padding: 28px 25px 0 0;
border: 0px;
}

#rightinfo {
position: absolute;
left: 700px;
width: 250px;
padding: 0px;
margin: 0px;
top: -15px;
}

#rightinfo h1 {
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 18px;
color: #015151;
font-weight: normal;
font-style: italic;
text-decoration: none;
}

#rightinfo a {
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 12px;
color: #fe6318;
font-weight: normal;
text-decoration: underline;
line-height: 30px;
}

#rightinfo a:hover {
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 12px;
color: #015151;
font-weight: normal;
text-decoration: none;
}

#sideads {
position: absolute;
left: 700px;
width: 180px;
top: 275px;
}

p{
font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Tahoma;
font-weight: normal;
font-size: 12px;
text-decoration: none;
color: #015151;
line-height: 24px;
border: 0px;
}

h1,h3,h4,h5,h6{
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
color: #015151;
font-size: 18px;
font-weight: normal;
text-decoration: none;
}

h2 {
font-size: 14px;
font-weight: bold;
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
color: #015151;
text-decoration: none;
}

acronym, abbr, span.caps {
	cursor: help;
}

a {
font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Tahoma;
font-weight: normal;
text-decoration: underline;
color: #fe6318;
}

a:hover {
font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Tahoma;
font-weight: normal;
text-decoration: none;
color: #015151;
}

a:link { 
font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Tahoma;
font-weight: normal;
text-decoration: underline;
color: #fe6318;
}

a:visited { 
font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Tahoma;
font-weight: normal;
text-decoration: underline;
color: #fe6318;
}

a:link:hover, a:visited:hover {
font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Tahoma;
font-weight: normal;
text-decoration: none;
color: #015151; 
}

a img{
border: 0px;
}

a:link img {
border: 0px;
}

a:visited img {
border: 0px; 
}

a:link:active img, a:visited:active img {
border: 0px;
}

body img.wp-smiley{
border: 0px;
}

.more-link{
border: 0px;
}

#searchform, input, input#s, input#searchsubmit {
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 14px;
color: #a0a0a0;
font-weight: normal;
border: 2px solid #e9f4fb;
padding: 5px;
margin-top: 5px;
width: 220px;
}

textarea {
font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;
font-size: 14px;
color: #a0a0a0;
font-weight: normal;
border: 2px solid #e9f4fb;
padding: 5px;
margin-top: 5px;
width: 220px;
}

li#archives{
}

.widget_archives{
}

li#recent-posts{
}

.widget_recent_entries{
}

#footerbg {
position: absolute;
width: 100%;
height: 244px;
top: 1100px;
background-image: url("images/footerbg.jpg");
background-repeat: repeat-x;
}

#footer {
position: absolute;
width: 950px;
left: 50%;
margin-left: -475px;
padding: 0px;
height: 200px;
top: 44px;
bottom: 0;
}

#footer a {
display: block;
font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Tahoma;
font-size: 12px;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
padding: 0 0 0 10px;
line-height: 33px;
margin: 0px;
border-top: 1px solid #fe9058;
width: 271px;
bottom: 0;
}

#footer a:hover {
display: block;
font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Tahoma;
font-size: 12px;
color: #FFFFFF;
font-weight: normal;
margin: 0px;
width: 271px;
height: 33px;
border-top: 1px solid #fe9058;
background-image: url("images/foot_bghover.jpg");
background-repeat: no-repeat;
text-decoration: none;
}

#sidetext {
position: absolute;
width: 90px;
padding: 0px;
margin: 0px;
font-family: "Lucida Sans", "Trebuchet MS", Verdana, Arial, Tahoma;
font-size: 12px;
color: #FFFFFF;
line-height: 38px;
}

#contactform {
position: absolute;
width: 300px;
padding: 0px;
margin: 0px;
left: 90px;
}

#advertise {
position: absolute;
width: 271px;
padding: 0px;
margin: 0px;
left: 358px;
}

#links {
position: absolute;
width: 271px;
padding: 0px;
margin: 0px;
left: 679px;
}

Code (markup):

 

I'm already on it, will probably have it done today, but I've also started making the HTML smaller. You've got some containers that look like they're only holding a background image, so I've shrunk 'em.

NineDesign is right, you don't have any of the "flow" because you're using absolute positioning for everything. : )

I'll post a link when I'm done (or think I'm done).

 

Well I'm done, but because I tried to do it without floats as you first said, I ended up with absolute positioning (on one div) because your "content" is two columns. You could also float, but the problem is that floats in the content div will not push the bottom end of the content box down upon the footer (either a clearing div after the floats but before the end of the content container, or somehow fiddling with overflow: hidden or visible <-- haven't gotten that trick to work yet). So, the way I've got it, the right column is absolutely positioned. It didn't look like it would grow or change much compared to the left column, which disappeared on your site after a few days (so my css for it may not be right).

Everything else is relatively positioned (except floats in the footer). I used the nasty !important hack like I described above so your content box is always a minimum height. In the html I have extra (copies) html for the left column. Take it out and you'll see the min-height of the container. Put them back in and you'll see the container grow and push the footer down like it should. This requires that in the html, the left column is the last thing written before the footer. Don't write the abs positioned right column after the left column or the footer gets confused.

I did a trick I saw deathshadow do (pixelcommander) for your menu. Wow, that was cool. One image. Other than the menu, the names of the other images are from my server because I changed them for testing. So in the html and css, you'll have to change back the original paths.

http://stommepoes.jobva.nl/Toughshot/toughshot.html
Css and images are in the same Toughshot folder. (toughshot2.css)
(I see some css erros but I think they're in teh googlieads.)

But basically, your problem was as everyone said. You absolutely positioned everything and then it will not grow and change as content is added.