OK, I need you help I am trying to do a 3 column layout for my new wordpress template and I am having so many issues. This is what I am looking for. I want all 3 columns to be the same height. This height needs to be dependent on column 2. I want it to stretch with the content in column 2. There will be no content in columns 1 and 3, just a repeat CSS background. I know CSS well and already have a good basic layout, I just am having issues making columns 1 and 3 be the same length as column 2. I also want it to fill 100% of the page. I appreciate your help with this. I have been messing with it for over 2 hours and I have run out of ideas. Please help!
The first thing you need to do is set the footer to the bottom of the viewport if there isn't enough content to push it over the edge. The best way to do this is using margins. I have an example of a 100% document height page available here: http://www.dan-schulz.com/for-others/ethics/template.html This post over at the SitePoint forums explains it in detail (and it should, given that it was written by the person who developed the technique in the first place). http://www.sitepoint.com/forums/showthread.php?p=1243541#post1243541 The next thing you're going to need to do is (inside your #container DIV - assuming you're using my HTML code as a baseline) set up your columns. Depending on what's going to be in those columns, you're going to have a few options for positioning them, BUT you're going to have to use either a background image OR fake it with a faux-border acting as the background. Deathshadow has an explaination of how to do the latter right here: http://battletech.hopto.org/html_tutorials/3coldiv/template.html But given that you have a 100% document height requirement, you'll be far better off using a background image to fake the equal height columns.
So if i wanted to use a background in the header, it would be better to put it straight in to code. But using css isn´t wrong either. Did i understood right?. If so that´s a nice thing to know. Could you please explain more why the image element is better to put in the code, i´d like to know.
What I'm saying in that code comment is to use an actual IMG tag for the logo (since it's content). If you need to dress up the header area, then serve the header image as a background. Kind of like how the City of Aurora Web site does it (though they rotate theirs). http://www.aurora-il.org Notice that the actual logo (Aurora - City of Lights) is an image, while the image that appears to the right is served as a background.
Ok..now i got it..thanks for the info I´ve used couple of times like here http://epareiluevoluutio.com/ and here http://koti.mbnet.fi/thinner/biorex/ so that i have the header pic and then i´ve used image map to pinpoint a certain part of the image as link to index page. I don´t think that´s wrong if it validates, but it´s not semantically correct ?
Semantically speaking, it wouldn't be correct. A menu is a list of links, which means that a list would be the appropriate markup to use.
This will validate: <p>Hello</p> <p>world</p> <p>I like cake</p> <div><p><span>the cake is a lie</span></p></div> But the tags make no sense. random tags=tag soup. It'll look the way you want and be perfectly valid. But semantics means that it means something.