I'm struggling to figure out how to do what I want with CSS. It's rather annoying. I'm building a website as part of my job. Without resorting to tables, frames or other ugly hacks, I want the layout to be simple. VERY simple. DISTURBINGLY simple.
What I want: A banner on top, a 4-item fixed navigation menu on the left column, text in the main area.
What I have: A banner on top, a 4-item fixed navigation menu on the left below the banner, text under the banner overlapping the menu. WHY?
Right now I'm testing inline then move out to linked CSS.
Code in my menu page:
<div id="menu" style="position:fixed;">
bla bla bla a-href menu items bla bla bla
</div>
I found position:fixed and position:absolute yield the same results. If I use float:left; the main text doesn't overlap it but wraps around it. I want it to be a column! GAAAHH!
Any ideas? Will be appreciated.
Learning CSS is really rewarding, you can sometimes reduce your (X)HTML or XML code to just a few lines (especially with XHTML5) and it allows you to make your website a lot more friendly to robots (for example search engine bots) and people with eye or reading problems, while increasing the sexiness of your website. Don't hesitate to ask more questions about CSS on TWHL, I know at least I will be happy to answer as many as I can and so will probably a couple of the other members as well.
Thanks for that potatis. In that case what I want is position:absolute. The test page was so short I didn't have to scroll it, hence I didn't notice the difference.
Edit: Here's what I want.
http://pastebin.com/m1db0e1c2
What a simple solution. I wonder how it didn't occur to me.