Help - Search - Members - Calendar
Full Version: div alignment
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
skitzfrk
I host my own website on my computer using Abyss webserver and I don't use it for anything big so I'm to lazy to put php or anything else into it. I am trying to make a layout with div's

<div id="main">
<div id="header"></div>
<div id="footer"></div>
</div>

that's the basic html that i'm using. all the placement stuff is in css. the position for each is absolute, the top for the header div is -64 so that it appears to be outside of the main div, like it's just sitting on top of it. That works fine, i'm having problems with the footer div. I made the height for the main one auto so that as I put stuff into it, it'll just get bigger to fit everything (atleast that's what i think it should do?). The problem that i'm having is that when I put bottom:-48px; for the footer div to make it go below the main one, it just appears at the top as if I did top:0px;. I think this is happening because the main div doesn't have a defined "bottom" because it's height is auto. Is there a way to do what I want or am I gonna have to define a height for the main div based one whatever I put inside it? For now i made a set height for main div so that you can see what i want it to look like

here's the site: http://synthvox.ath.cx
here's the css: http://synthvox.ath.cx/styles/index.css

there's some extra stuff in the css that i'm gonna mess with later so ignore it for now.
Darin McGrew
It can't hurt to fix the markup errors and CSS errors reported by the online tools.

Can you post the URL of your best attempt at a flexible layout?

Just looking at what you have, it seems everything is positioned, which is bound to be fragile if you don't know the exact size of all your content. (And if you have any text content, then you don't know the exact size of your content.)
skitzfrk
Well I fixed the errors, and copied The Raven into the main div for some content and now it works! I don't think it has to do with the errors in from your link because they were just id's that should've been classes. I probably changed something without knowing it, but thanks anyways. I just changed the actual files so the links in the first post show the new version.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.